﻿Ext.namespace('Extx.cmp');

/**
* Create a desginer
*/
Extx.cmp.workSpace = function(config) {
    
    Extx.cmp.workSpace.superclass.constructor.call(this, config);
    this.initialConfig = config;
};

Ext.extend(Extx.cmp.workSpace, Ext.util.Observable, {


    //@private Whe tag each json object with a id
    jsonId: '__JSON__',

    //url to load content
    dataUrl: '../Release/Index',

    addUrl: '../Release/Update',

    deleteUrl: '../Release/Delete',

    addCardUrl: '../Feature/Update',

    deleteCardUrl: '../Feature/Delete',

    autoLoadData: false,

    authenticated: false,

    tabLoaded: false,

    //@private The id for button undo
    undoBtnId: Ext.id(),

    //@private The id for button undo
    redoBtnId: Ext.id(),

    //@private The maximum number of undo histories to keep
    undoHistoryMax: 20,
    //@private The history for undo
    undoHistory: [],
    //@private The marker for active undo
    undoHistoryMark: 0,

    /**
    * A repository config item
    */
    repository: null,

    cardData: '',

    regionData: '',

    parentEl: 'ProjectPanel',

    //request parameters
    params: [],

    rowArray: [],

    designWeb: false,

    //container type e.g. Project or Release or Iteration
    containerType: false,

    /**
    * Called from within the constructor allowing to initialize the parser
    */
    initialize: function() {
        Extx.cmp.workSpace.superclass.initialize.call(this);
        //        for (var i = 0; i < this.propertyDefinitions.length; i++)
        //            this.propertyDefinitions[i] = this.formatPath(this.propertyDefinitions[i]);
        //        for (var i = 0; i < this.components.length; i++)
        //            this.components[i] = this.formatPath(this.components[i]);
        Ext.QuickTips.init();
        this.addEvents({

            /**
            * Fires before a json is been applied to a visual component
            * @event beforeapply
            * @param {Object} element The visual component
            * @param {Object} json The json used
            */
            'beforeapply': true,

            /**
            * Fires after a json has been applied to a visual component
            * @event afterapply
            * @param {Object} element The visual component
            * @param {Object} json The json used
            */
            'afterapply': true,
            /**
            * Fires before the toolbox is shown, returning false will disable show
            * @event beforeshow
            * @param {Object} toolbox The toolbox window
            */
            'beforeshow': true,
            /**
            * Fires before the toolbox is hidden, returning false will cancel hide
            * @event beforehide
            * @param {Object} toolbox The toolbox window
            */
            'beforehide': true,
            /**
            * Fires after a item is added to designer
            * @event add
            */
            'add': true,
            /**
            * Fires after a item is removed from designer
            * @event remove
            */
            'remove': true,
            /**
            * Fires after a item is changed in designer
            * @event change
            */
            'change': true,
            /**
            * Fires after a new configuration is loaded into the designer
            * @event newconfig
            */
            'newconfig': true,
            /**
            * Fires after a item is selected in designer
            * @event add
            */
            'selectelement': false,
            /**
            * Fires after loadConfig fails
            * @event loadfailed
            * @param {Url} url The url tried to load
            * @param {Object} response Response object
            */
            'loadfailed': false
        });
    },

    initiate: function(el) {
        this.designWeb = el;
    },

    /**
    * Init the plugin ad assoiate it to a field
    * @param {Component} field The component to connect this plugin to
    */
    init: function(field) {
        this.container = field;
        this.that = this;
        this.container.codeConfig = {};

        //Init the components drag & drop and toolbox when it is rendered
        this.container.on('render', function() {

            if (this.initialConfig.authenticate == "true") {
                this.authenticated = false;
            } else this.authenticated = true;

            if (this.authenticated) {
                //Drag Drop
                this.drag = new Ext.dd.DragZone(this.container.el, {
                    ddGroup: 'designerddgroup',
                    getDragData: this.getDragData.createDelegate(this)
                });
                this.drop = new Ext.dd.DropZone(this.container.el, {
                    ddGroup: 'designerddgroup',
                    notifyOver: this.notifyOver.createDelegate(this),
                    notifyDrop: this.notifyDrop.createDelegate(this)
                });
                //Focus element
                this.container.el.on('click', function(e, el) {
                    var cmp = this.focusElement(this.getTarget(e));
                    e.stopEvent();
                }, this);
                this.container.el.on('dblclick', function(e, el) {
                    var cmp = this.handleElement(this.getTarget(e));
                    e.stopEvent();
                    return false;
                }, this);
                //Visual resize
                this.resizeLayer = new Ext.Layer({ cls: 'resizeLayer', html: 'Resize me' });
                this.resizeLayer.setOpacity(0.7);
                this.resizeLayer.resizer = new Ext.Resizable(this.resizeLayer, {
                    handles: 'se,s,e',
                    draggable: true,
                    dynamic: true,
                    pinned: true
                });
                this.resizeLayer.resizer.dd.lock();
                this.resizeLayer.resizer.on('resize', this.resizeElement, this);
                this.resizeLayer.resizer.dd.endDrag = this.moveElement.createDelegate(this);
                //Toolbox
                this.toolbox(true);
                if (!Ext.getCmp('proGrid').propertyLoaded) Ext.getCmp('proGrid').getProperties();
                //Set property grid            
                this.setPropertyGrid(Ext.getCmp('proGrid'));
                //Empty desinger  
                if (this.initialConfig.autoLoad || this.autoLoadData)
                    this.createConfig();
                //Context Menu
                this.initContextMenu();

                //Set events
                setEvents();
            }
        }, this);
    },


    handleElement: function(el) {
        var cmp = this.getDesignElement(el);
        if (cmp.codeConfig.etype == "card") {
            this.editablex(el.container.id, { 'ajaxUrl': 'a.php', 'paramName': 'newValue', 'editorType': 'multiple', 'source': el.codeConfig });
            return;
        } else if (cmp.codeConfig.etype == etypes.container) return;

        items = [];
        var projectTabPanel = Ext.getCmp('ProjectTabPanel');
        var data = cmp.codeConfig.propConfig;
        var panel = Ext.getCmp(cmp.codeConfig.propConfig.ID);

        if (!panel) {

            if (cmp.codeConfig.etype == "Project") {
                var urls = { addUrl: '../Iteration/Add', deleteUrl: '../Iteration/Delete', addCardUrl: '../Story/Update', deleteCardUrl: '../Story/Delete' };
                projectTabPanel.add(this.buildDesignerUI('Release', { releaseId: data.ID }, "../Iteration/Index", data.ID, data.Name, true, urls));
                var newTab = projectTabPanel.items.last();
                newTab.on('activate', this.loadReleaseBurndown, this);
                newTab.on('deactivate', this.deactiveElement, this);
            } else if (cmp.codeConfig.etype == "Release") {
                var urls = { addUrl: '../Status/Add', deleteUrl: '../Status/Delete', addCardUrl: '../Task/Update', deleteCardUrl: '../Task/Delete' };
                projectTabPanel.add(this.buildDesignerUI('Iteration', { iterationId: data.ID }, "../Status/Index", data.ID, data.Name, true, urls, data));
                var newTab = projectTabPanel.items.last();
                newTab.on('activate', this.loadBurndown, this);
                newTab.on('deactivate', this.deactiveElement, this);
            } else return;


            projectTabPanel.activate(projectTabPanel.items.last());

        } else {

            projectTabPanel.activate(panel);
        }
    },

    editablex: function(elementId, config) {
        // private vars
        // set some defaults for our object.
        var _defaultAjaxMethod = 'POST'
        var _deafultCssClass = "editable";

        this.config = config;

        // test what we've been passed.
        var _checkConfig = function(config) {
            // checking its a literal.
            if (config.constructor != Object) {
                throw new Error("Invalid Config");
            }

            if (config.extraParams) {
                if (config.extraParams.constructor !== Object) {
                    throw new Error("Invalid config value extraParams - must be a literal.");
                }
            }

            if (config.paramName) {
                if (config.paramName.constructor !== String) {
                    throw new Error("Invalid config value paramName - must be a string.");
                }
            }

            // check required params.
            if (config.ajaxUrl.length == 0) {
                throw new Error("Cannot have empty config value ajaxUrl");
            }
        }

        // after the update has occured put everything back to normal.
        this.cleanUp = function(elId, keepEditable) {
            Ext.get(elId + '_editor').remove();

            Ext.get(elId).setStyle({
                'display': ''
            });

            if (keepEditable) {
                Ext.get(elId).addClassOnOver(this.config.editableCls != null ? this.config.editableCls : 'editable');
            }

            // calling custom after update
            if (this.config.afterUpdate) {
                this.config.afterUpdate(elId);
            }
        }

        // everything went swimmingly..
        this.editComplete = function(text, elId) {
            el = Ext.get(elId);
            el.update(text);

            // calling custom on success
            if (this.config.onSuccess) {
                this.config.onSuccess(text, elId);
            }
        }

        // what to do when an edit fails.
        // must be a custom func from config.
        this.editFailed = function(text, elId) {
            if (this.config.onFailure) {
                this.config.onFailure(text, elId);
            }

            // no default action.
        }

        // methods that handles the posting of the data to the server.
        this.saveChanges = function(elId) {
            var el = Ext.get(elId);
            var new_value = Ext.get(elId + '_edit').getValue();

            //el.update('Saving...');

            this.cleanUp(elId, true);

            if (this.config.source.propConfig.Name == new_value) return;

            var arr_params = [];

            if (this.config.extraParams) {
                arr_params.concat(this.config.extraParams);
            }

            // add the actual edited value.
            // if the name attr is black we use the id instead.           
            this.config.source.tempConfig = this.config.source.propConfig;
            this.config.source.propConfig.Name = new_value;
            this.tempData = { source: this.config.source, change: true };
            //var html = this.getCardHtml(this.config.source.propConfig);
            //this.setObjectValue(this.config.source, "html", html, html);
            this.postToServer(this.config.source.propConfig, this.initialConfig.urls.addCardUrl || this.addCardUrl, el);
            //this.redrawElement.defer(150, this); //this.initialConfig.urls.addUrl || this.addUrl, { Json: this.regionData }
            //this.updateUI();         
        }

        // just adds a click handler and css class.
        this.makeEditable = function(elId) {
            var e = Ext.get(elId);

            e.addClassOnOver(this.config.editableCls != null ? this.config.editableCls : 'editable');

            e.on('click', function() {
                this.edit(elId);
            }, this);
        }

        this.edit = function(elId) {
            var el = Ext.get(elId);

            // hide El.Hide() is naff
            el.setStyle({
                'display': 'none'
            });

            Ext.DomHelper.insertBefore(elId, [{
                tag: 'div',
                id: elId + '_editor'
}]);

                // put a single line text input or multi line textbox.
                if (this.config.editorType == "single") {
                    Ext.DomHelper.append(elId + '_editor', [{
                        tag: 'input',
                        id: elId + '_edit',
                        name: elId + '_edit',
                        type: 'text',
                        value: el.dom.innerHTML,
                        style: 'height:100px;' + (this.config.maxWidth ? 'width:' + this.config.maxWidth : 'width:50%')
}]);
                    }
                    else {
                        Ext.DomHelper.append(elId + '_editor', [{
                            tag: 'textarea',
                            id: elId + '_edit',
                            name: elId + '_edit',
                            rows: 6,
                            cols: 16,
                            style: 'border:none;height:98px',
                            html: this.config.source.propConfig.Name
}]);

                        }
                        Ext.get(elId + '_edit').on('focusout', function() {
                            this.saveChanges(elId);
                        }, this);
                        Ext.get(elId + '_edit').on('blur', function() {
                            this.saveChanges(elId);
                        }, this);
                        Ext.get(elId + '_edit').focus();
                        var el = document.getElementById(elId + '_edit');
                        el.select();
                    }

                    // check everything first.
                    _checkConfig(config);

                    // constructor code
                    this.edit(elementId);
                },

                addProjectItem: function(designEl, el, etype, defProps, defItems, defFeat) {
                    defProps = Ext.util.JSON.decode(defProps);
                    defFeat = Ext.util.JSON.decode(defFeat);
                    defIteProps = Ext.util.JSON.decode(defIteProps);
                    defProps.Name = "Old " + etype;
                    defFeat.FeatureID = "{00000000-0000-0000-0000-000000000000}";
                    defFeat.ReleaseID = "{00000000-0000-0000-0000-000000000000}";
                    defProps.ReleaseID = "{00000000-0000-0000-0000-000000000000}";
                    defIteProps.IterationID = "{00000000-0000-0000-0000-000000000000}";
                    defProps.Features = new Array();
                    defProps.Iterations = new Array();

                    var today = new Date();    //Get today's date
                    defProps.Features.push(defFeat);
                    defProps.Iterations.push(defIteProps);

                    //defProps.PeriodFrom = new Date().setDate(today.getDate() + 1);
                    //defProps.PeriodTo = new Date().setDate(today.getDate() + 30);
                    var title = "New " + etype + " (" + defProps.PeriodTo + ")";

                    var template = this.getPanelConfig(title, etype, defProps);
                    var relPanel = Ext.getCmp(el);
                    var items = (typeof (template) == 'object' ? template : this.decode(template)) || null;
                    var itmEdit = this.editable(items);

                    designEl.container.codeConfig.items[0].items.push(itmEdit);
                    designEl.redrawElement(designEl.container);
                    designEl.postToServer(defProps, '../' + etype + '/Add');
                },



                getPanelConfig: function(text, etype, properties, itemsObj) {
                    return { layout: "column",
                        items: [{
                            bodyStyle: 'padding: 10px;background:transparent url(../../Content/images/grass.gif) bottom repeat-x;',
                            cls: 'center-aligns',
                            allowDomMove: 'true',
                            defaults: { style: 'margin-bottom: 5px;' },
                            etype: etype || "",
                            propConfig: properties || "",
                            listeners: {
                                render: function(cmp) {
                                    this.setSize('100%', Ext.getCmp('ProjectPanel').container.getHeight() - 30);
                                    this.addClass('normal-element');
                                }
                            },
                            title: text || "",
                            width: 250
}]
                        };
                    },


                    getContextMenu: function(containerType) {
                        var contextMenu;

                        if (containerType == "Project" || containerType == "Release" || containerType == "Iteration") {
                            contextMenu = new Ext.menu.Menu({ items: [{
                                text: 'Delete',
                                iconCls: 'icon-deleteEl',
                                scope: this,
                                handler: function(item) {
                                    var text;
                                    if (this.initialConfig.containerType == etypes.release)
                                        text = "Deleteing Iteration will delete Stories as well";
                                    else if (this.initialConfig.containerType == etypes.project)
                                        text = "Deleteing Release will delete Features as well";
                                    else
                                        text = "Status will be removed from other Iterations as well";

                                    Ext.MessageBox.confirm('Please confirm', text + ', Are you sure you want to continue?',
                                        function(btn, text) {
                                            if (btn == 'yes') {
                                                var id = this.getDesignElement(contextMenu.element).codeConfig.propConfig.ID;
                                                var url = this.initialConfig.urls.deleteUrl || this.deleteUrl;
                                                if (IsDefaultStatus(this.getDesignElement(contextMenu.element).codeConfig.propConfig.Name)) {
                                                    Extx.cmp.toastMsg("Delete failed", "Default statuses cannot be deleted.");
                                                    return;
                                                }
                                                this.curContextMenuElId = id;
                                                this.curContextMenuElType = this.getDesignElement(contextMenu.element).etype;

                                                this.postDelete(url, id);
                                            }
                                        },
                                        this
                                    );
                                }
                            }
                            , {
                                text: 'Properties',
                                iconCls: 'icon-editEl',
                                scope: this,
                                handler: function(item) {
                                    var cmp = this.focusElement(contextMenu.element);
                                }
                            }, {
                                text: 'Select All',
                                iconCls: 'icon-layoutEdit',
                                scope: this,
                                handler: function(item) {
                                    Extx.cmp.msg("Select All", "This feature is yet to implement");
                                }
}]
                            });
                        } else if (containerType == "card" || containerType == "ccard") {
                            contextMenu = new Ext.menu.Menu({ items: [{
                                text: 'Delete',
                                iconCls: 'icon-deleteEl',
                                scope: this,
                                handler: function(item) {
                                    var props = this.getDesignElement(contextMenu.element).codeConfig.propConfig;
                                    var entityId = props.ID;
                                    var url = this.initialConfig.urls.deleteCardUrl || this.deleteCardUrl;
                                    this.curContextMenuElId = entityId;
                                    this.curContextMenuElType = this.getDesignElement(contextMenu.element).etype;
                                    this.postDelete(url, entityId);
                                }
                            }, {
                                text: 'Inline Edit',
                                tooltip: 'You can inline edit the text.',
                                iconCls: 'icon-resize',
                                scope: this,
                                handler: function(item) {
                                    //this.visualResize(contextMenu.element);
                                    var cmp = this.handleElement(contextMenu.element);
                                }
                            }
                            , {
                                text: 'Properties',
                                iconCls: 'icon-editEl',
                                scope: this,
                                handler: function(item) {
                                    var cmp = this.focusElement(contextMenu.element);
                                }
                            }, {
                                text: 'Select All',
                                iconCls: 'icon-layoutEdit',
                                scope: this,
                                handler: function(item) {
                                    Extx.cmp.msg("Select All", "This feature is yet to implement");
                                }
                            }, {
                                text: 'Small Size',
                                iconCls: 'icon-redo',
                                scope: this,
                                handler: function(item) {
                                    this.getDesignElement(contextMenu.element).codeConfig.isSmallSize = true;
                                }
                            }, {
                                text: 'Normal Size',
                                iconCls: 'icon-undo',
                                scope: this,
                                handler: function(item) {

                                }
}]
                            });
                        }
                        return contextMenu;
                    },

                    postDelete: function(url, id) {

                        if (this.curContextMenuElType == etypes.iteration || this.curContextMenuElType == etypes.release || this.curContextMenuElType == etypes.project) {

                            //Ext.MessageBox.confirm("
                        }

                        Ext.MessageBox.show({
                            msg: 'Deleting, please wait',
                            progressText: 'Deleted data is',
                            width: 250,
                            wait: true,
                            waitConfig: {
                                interval: 200
                            }
                        });
                        Ext.Ajax.request({
                            url: url,
                            method: "POST",
                            waitMsg: "Please wait!",
                            params: { Guid: id },
                            callback: function(options, success, response) {
                                Ext.MessageBox.hide();
                                if (success) {
                                    var responseMessage = Ext.util.JSON.decode(response.responseText);
                                    if (responseMessage.Result) {
                                        Extx.cmp.msg("Message", responseMessage.Message);
                                        this.performCleanUp();
                                        this.updateUI();
                                    } else {
                                        Extx.cmp.toastMsg("Delete failed", responseMessage.Message);
                                    }
                                } else {
                                    Extx.cmp.msg(oops.title, oops.msg + response.responseText);
                                }
                            },
                            scope: this
                        });
                    },

                    performCleanUp: function() {

                        if (this.curContextMenuElType == etypes.iteration) {
                            var projectTabPanel = Ext.getCmp('ProjectTabPanel');
                            var remArr = [];
                            var count = projectTabPanel.items.items.length;
                            for (i = 1; i < count; i++) {
                                var tab = projectTabPanel.items.get(i);
                                var dsgr = tab.items.get(0).plugins[0];
                                if (dsgr && dsgr.tabLoaded && dsgr.initialConfig.containerType == etypes.iteration) {

                                    if (dsgr.initialConfig.containerId != this.initialConfig.containerId)
                                        remArr.push(tab);
                                }
                            }
                            for (i = 0; i < remArr.length; i++) {
                                projectTabPanel.remove(remArr[i]);
                            }
                        }

                        for (i = 0; i < this.container.codeConfig.items[0].items.length; i++) {
                            var item = this.container.codeConfig.items[0].items[i];
                            if (this.curContextMenuElType == etypes.iteration || this.curContextMenuElType == etypes.release || this.curContextMenuElType == etypes.project) {
                                var id = item.propConfig.ID;
                                if (id.toLowerCase() == this.curContextMenuElId.toLowerCase()) {
                                    this.container.codeConfig.items[0].items.remove(item);
                                    var projectTabPanel = Ext.getCmp('ProjectTabPanel');
                                    var panel = Ext.getCmp(this.curContextMenuElId);
                                    if (panel)
                                        projectTabPanel.remove(panel);
                                    this.curContextMenuElId = undefined;
                                    this.curContextMenuElType = undefined;
                                    //this.redrawElement.defer(150, this);
                                    if (this.container.codeConfig.items[0].items.length == 0) {
                                        this.container.codeConfig.items[0].items = undefined;
                                        this.regionData = undefined;
                                    } else this.regionData = Ext.util.JSON.encode(getLastItem(this.container.codeConfig.items[0].items).propConfig);
                                    this.refresh();
                                    return;
                                }

                            }
                            else if (this.curContextMenuElType == etypes.card && item.items) {
                                for (j = 0; j < item.items.length; j++) {
                                    var card = item.items[j];
                                    var id = card.items[0].propConfig.ID;
                                    if (id.toLowerCase() == this.curContextMenuElId.toLowerCase()) {
                                        item.items.remove(card);
                                        item.propConfig.items.remove(card.items[0].propConfig);
                                        if (item.items.length == 0) item.items = undefined;
                                        if (item.propConfig.items.length == 0) item.propConfig.items = undefined;
                                        this.curContextMenuElId = undefined;
                                        this.curContextMenuElType = undefined;
                                        this.refresh();
                                        return;
                                    }
                                }
                            }
                        }
                    },

                    /**
                    * Create the context menu for a selected element
                    */
                    initContextMenu: function() {



                        this.container.el.on('contextmenu', function(e) {
                            e.preventDefault();
                            var el = this.getDesignElement(this.getTarget(e));
                            if (el && el.etype != etypes.container) {
                                var contextMenu = this.getContextMenu(el.etype);
                                contextMenu.element = el;
                                contextMenu.showAt(e.getXY());
                            }
                        }, this);
                    },

                    /**
                    * Hide the visualResize layer
                    */
                    hideVisualResize: function() {
                        this.resizeLayer.hide();
                        this.resizeLayer.resizer.dd.lock();
                    },

                    /**
                    * Start resize of an element, it will become active element
                    * @param {Element} element The element to resize
                    * @param {Boolean} select Should element be selected (default true) 
                    */
                    visualResize: function(element, select) {
                        var cmp = select === false ? element : this.selectElement(element);
                        if (!cmp) return;
                        var own = this.getContainer(cmp.ownerCt);
                        var layout = own.codeConfig ? own.codeConfig.layout : null;
                        if (layout == 'fit') {
                            this.fireEvent('error', 'visualResize', 'Cannot resize element within fit layout');
                        } else {
                            //Incase of absolute layout enable movement within element
                            if (layout == 'absolute') {
                                this.resizeLayer.resizer.dd.unlock();
                                this.resizeLayer.resizer.dd.constrainTo(own.body);
                            } else {
                                this.resizeLayer.resizer.dd.lock();
                            }
                            this.resizeLayer.setBox(cmp.el.getBox());
                            this.resizeLayer.show();
                        }
                    },

                    /**
                    * Move a element within absolute layout based on drag event of the resize layer
                    */
                    moveElement: function() {
                        var cmp = this.activeElement;
                        var pos = this.resizeLayer.getXY();
                        var oPos = this.getContainer(cmp.ownerCt).body.getXY();
                        this.markUndo();
                        cmp.codeConfig.x = pos[0] - oPos[0];
                        cmp.codeConfig.y = pos[1] - oPos[1];
                        this.redrawElement();
                    },

                    /**
                    * resize an element based on the resize of resizelayer
                    * @param {} r
                    * @param {int} w New width of element
                    * @param {int] h New height of element
                    */
                    resizeElement: function(r, w, h) {
                        var cmp = this.activeElement;
                        var s = cmp.el.getSize();
                        if (s.width != w) {
                            cmp.codeConfig.width = w;
                            delete cmp.codeConfig.columnWidth;
                        }
                        if (s.height != h) {
                            cmp.codeConfig.height = h;
                            delete cmp.codeConfig.autoHeight;
                        }
                        this.redrawElement();
                    },

                    /**
                    * Remove an element
                    * @param {Element} source The element to remove
                    * @param {Boolean\String} internal When true no remove event and redraw is fired,
                    * when "noundo" no undo is created (defaults false)
                    * @return {Boolean} Indicator telling element was removed
                    */
                    removeElement: function(source, internal) {
                        if (!source) return false;
                        var own = this.getContainer(source.ownerCt);
                        if (!internal) this.markUndo();
                        for (var i = 0; i < own.items.length; i++) {
                            if (own.items.items[i] == source) {
                                own.codeConfig.items.splice(i, 1);
                                own.remove(source, true);
                                if (own.codeConfig.items.length == 0) delete own.codeConfig.items;
                                if (!internal || internal == "noundo") {
                                    this.redrawElement(own, this.getJsonId(this.activeElement == source ? own : this.activeElement));
                                    //this.fireEvent('remove');
                                } else {

                                    this.redrawContainer = true;
                                }
                                return true;
                            }
                        }
                        return false;
                    },

                    /**
                    * Update the menu buttons for undo and redo
                    */
                    menuUpdate: function() {
                        var menu = Ext.getCmp(this.undoBtnId);
                        if (menu) if (this.undoHistoryMark > 0) menu.enable(); else menu.disable();
                        menu = Ext.getCmp(this.redoBtnId);
                        if (menu) if (this.undoHistory.length > this.undoHistoryMark + 1) menu.enable(); else menu.disable();
                    },

                    /**
                    * Append the config to the element
                    * @param {Element} el The element to which the config would be added
                    * @param {Object} config The config object to be added
                    * @param {Boolean} select Should item be selected
                    * @param {String} dropLocation The operation to perform
                    * @param {Object} source The source used to perform operation
                    * @param {Object} extraConfig A extra config that should be added to config
                    * @return {Component} The component added
                    */
                    appendConfig: function(el, config, select, dropLocation, source, extraConfig) {
                        if (!el) return false;
                        //this.markUndo();

                        //Custom function for adding stuff to a container
                        var add = function(src, comp, at, before) {
                            if (!src.items) src.initItems();
                            var pos = src.items.length;
                            for (var i = 0; i < src.items.length; i++) {
                                if (src.items.items[i] == at) {
                                    pos = (before) ? i : i + 1;
                                    i = src.items.length;
                                }
                            }
                            if (!src.codeConfig.items || !(src.codeConfig.items instanceof Array))
                                src.codeConfig.items = [];
                            delete src.codeConfig.html; //items and html go not together in IE
                            if (pos >= src.codeConfig.items.length)
                                src.codeConfig.items.push(comp)
                            else
                                src.codeConfig.items.splice(pos, 0, comp);
                            src.propConfig.items.push(comp.items[0].propConfig);
                        } .createDelegate(this);


                        if (typeof config == 'function') {
                            config.call(this, function(config) {
                                this.appendConfig(el, config, true, dropLocation, source, extraConfig);
                            } .createDelegate(this), this);
                        } else {
                            //Get the config of the items
                            var ccmp, cmp = this.getDesignElement(el, true);
                            //var items = this.editable(Ext.applyIf(this.clone(config), extraConfig || {}));
                            var items = this.editable(Ext.applyIf(config, extraConfig || {}));
                            //Transform a config to prevent errors
                            var transformAppend = function(cmp, last) {
                                if (!cmp) return;
                                //Transform form to layout if allready contained
                                if (items.xtype == 'form' && cmp instanceof Ext.form.FormPanel) {
                                    delete items.xtype;
                                    items.layout = 'form';
                                }
                                transformAppend(this.getContainer(cmp.ownerCt), cmp);
                            } .createDelegate(this);
                            transformAppend(cmp);
                            //Find the container that should be changed
                            ccmp = this.getContainer(cmp);
                            switch (dropLocation) {
                                case 'abovecode':
                                case 'belowcode':
                                    ccmp = this.isContainer(cmp) ? this.getContainer(cmp.ownerCt) : ccmp;
                                case 'appendcode':
                                    this.removeElement(source, true);
                                    add(ccmp, items, cmp, dropLocation == 'abovecode');
                                    break;
                                case 'appendafter':
                                    add(ccmp, items, cmp, false);
                                    break;
                                case 'appendbefore':
                                    add(ccmp, items, cmp, true);
                                    break;
                                case 'moveafter':
                                    this.removeElement(source, true);
                                    add(ccmp, items, cmp, false);
                                    break;
                                case 'movebefore':
                                    this.removeElement(source, true);
                                    add(ccmp, items, cmp, true);
                                    break;
                                case 'move':
                                    this.removeElement(source, true);
                                    add(ccmp, items);
                                    break;
                                default:
                                    add(ccmp, items);
                            }
                            this.modified = true;
                            //this.fireEvent('add');
                            this.redrawElement(ccmp, items[this.jsonId]);
                        }
                        return false;
                    },

                    /**
                    * Create the codeConfig object and apply it to the field
                    */
                    createConfig: function() {
                        // Get data from the server
                        //var msg = Ext.MessageBox.wait('Loading ' + this.initialConfig.containerType);

                        this.container.el.mask('Please wait!', 'x-mask-loading');

                        Ext.Ajax.request({
                            url: this.initialConfig.url || this.dataUrl,
                            method: "POST",
                            waitMsg: "Please wait!",
                            params: this.initialConfig.params,
                            callback: function(options, success, response) {

                                this.container.el.unmask();
                                if (success) {
                                    var responseMessage = Ext.util.JSON
											.decode(response.responseText);
                                    if (responseMessage.Result) {
                                        var json = Ext.util.JSON.decode(responseMessage.Data);
                                        this.resetConfig(json);
                                        this.tabLoaded = true;
                                        Ext.getCmp('ProjectPanel').hasLoaded = true;
                                    } else {
                                        Extx.cmp.toastMsg("Delete failed", responseMessage.Message);
                                    }
                                    this.modified = false;
                                } else {
                                    Extx.cmp.msg(oops.title, oops.msg + response.responseText);
                                }
                                if (this.loadMask && this.container.ownerCt)
                                    this.container.ownerCt.el.unmask();
                            },
                            scope: this
                        });

                        if (this.container.tbar && this.container.tbar.first()) {
                            var tbar = [];
                            var items = [];
                            while (this.container.items.first()) {
                                items.push(this.container.items.first());
                                this.container.items.remove(this.container.items.first());
                            }

                            while (this.container.tbar.first()) {
                                tbar.push(this.container.tbar.first());
                                this.container.tbar.remove(this.container.tbar.first());
                            }

                            //Re create a panel with items from config editable root
                            var config = { bodyStyle: 'background:transparent url(../images/grass.gif) bottom repeat-x;', 'border': false, 'layout': 'column', 'items': this.editable(items), 'tbar': tbar };
                            config[this.jsonId] = Ext.id();
                            var el = this.container.add(config);
                            el.codeConfig = config;
                        }
                    },

                    /**
                    * Create the codeConfig object and apply it to the field
                    */
                    authenticate: function() {
                        // Get data from the server
                        //var msg = Ext.MessageBox.wait('Loading ' + this.initialConfig.containerType);
                        this.container.el.mask('Please wait!', 'x-mask-loading');

                        Ext.Ajax.request({
                            url: "Login/",
                            method: "POST",
                            waitMsg: "Please wait!",
                            params: this.initialConfig.params,
                            callback: function(options, success, response) {

                                this.container.el.unmask();
                                if (success) {
                                    var responseMessage = Ext.util.JSON
											.decode(response.responseText);
                                    if (responseMessage.Result) {
                                        var json = Ext.util.JSON.decode(responseMessage.Data);
                                        this.resetConfig(json);

                                    } else {
                                        Ext.MessageBox.alert("Message",
												responseMessage.Message);
                                    }
                                    this.modified = false;
                                } else {
                                    Extx.cmp.msg(oops.title, oops.msg + response.responseText);
                                }
                                if (this.loadMask && this.container.ownerCt)
                                    this.container.ownerCt.el.unmask();
                            },
                            scope: this
                        });
                    },

                    getToolbar: function() {

                        var depnt = this.propertyGrid.getPropertyType("Consignee");
                        if (depnt != null && depnt.values.length == 0) return [{}];

                        var card = "AddFeature, Click here to add a Feature";
                        var layout = "AddRelease, Click here to add new Release";

                        if (this.initialConfig.containerType == "Release") {
                            card = card.replace("Feature", "Story");
                            layout = layout.replace("Release", "Iteration");
                        }

                        else if (this.initialConfig.containerType == "Iteration") {
                            card = card.replace("Feature", "Task");
                            layout = layout.replace("Release", "Status");
                        }
                        card = card.split(',');
                        layout = layout.split(',');

                        return [{
                            text: layout[0],
                            iconCls: 'new-tab',
                            icon: "../../Content/icons/addapp.png",
                            tooltip: layout[1],
                            action: "layout",
                            that: this,
                            handler: this.handleRegionAction
                        },
                                    {
                                        text: card[0],
                                        iconCls: 'new-tab',
                                        icon: "../../Content/icons/add.png",
                                        tooltip: card[1],
                                        action: "card",
                                        that: this,
                                        handler: this.handleCardAction
}]
                    },

                    handleRegionAction: function(el) {
                        el.that.addRegion();
                    },

                    handleCardAction: function(el) {
                        el.that.addCard();
                    },

                    addRegion: function(el) {
                        var startdate = new Date();
                        startdate.setDate(startdate.getDate() - 1);
                        (this.regionData) ? endDate = Ext.util.JSON.decode(this.regionData).PeriodTo : endDate = undefined; //endDate = getMSDate(startdate);

                        if (this.initialConfig.containerType == 'Project')
                            this.regionData = { ProjectID: Ext.get('projectId').dom.value, PeriodTo: endDate };
                        else if (this.initialConfig.containerType == 'Release')
                            this.regionData = { ReleaseID: this.initialConfig.containerId };
                        if (endDate) this.regionData.PeriodTo = endDate;
                        else if (this.initialConfig.containerType == 'Iteration')
                            this.regionData = { Name: 'New Status' };

                        this.regionData.items = new Array();
                        this.regionData = Ext.util.JSON.encode(this.regionData);
                        this.saveRegion(this.initialConfig.urls.addUrl || this.addUrl, { Json: this.regionData, Update: false });
                    },

                    addCard: function(el) {
                        //if (this.cardData) this.cardData = Ext.util.JSON.decode(this.cardData);

                        var source = this.propertyGrid.getSource();
                        var sourceId;

                        if (source.propConfig) sourceId = source.propConfig.ID;
                        else sourceId = (this.container.items.items[0].items.items[0].propConfig) ? this.container.items.items[0].items.items[0].propConfig.ID : this.initialConfig.containerId;

                        this.cardData = undefined;

                        if (!this.cardData) {
                            if (this.initialConfig.containerType == 'Project') {
                                this.cardData = { Size: "1.0", FullSize: "true", Target: Ext.util.JSON.decode(this.regionData).PeriodTo, ReleaseID: Ext.util.JSON.decode(this.regionData).ID, Name: "New Story" };
                            } else if (this.initialConfig.containerType == 'Release') {
                                this.cardData = { Size: "1.0", InitialStory: "true", Name: "New Story", IterationID: Ext.util.JSON.decode(this.regionData).ID };
                                this.cardData.IterationID = Ext.util.JSON.decode(this.regionData).ID;
                            } else if (this.initialConfig.containerType == 'Iteration') {
                                this.cardData = { Estimate: "1.0", Primary: "true", Name: "New Task", IterationID: this.initialConfig.containerId, StatusID: sourceId };
                                //this.cardData.StatusID = Ext.util.JSON.decode(this.regionData).ID;
                            }
                        }

                        if (source.propConfig) {
                            if (this.initialConfig.containerType == 'Project') {
                                this.cardData.ReleaseID = source.propConfig.ID;
                            } else if (this.initialConfig.containerType == 'Release') {
                                this.cardData.IterationID = source.propConfig.ID;
                            } else if (this.initialConfig.containerType == 'Iteration') {
                                this.cardData.StatusID = source.propConfig.ID;
                            }
                        }
                        this.cardData = Ext.util.JSON.encode(this.cardData);
                        this.saveCard(this.initialConfig.urls.addCardUrl || this.addCardUrl, { Json: this.cardData, Update: false });
                    },

                    saveRegion: function(url, params) {
                        //var msg = Ext.MessageBox.wait('Adding Record');
                        this.container.items.items[0].el.mask('Please wait!', 'x-mask-loading');

                        Ext.Ajax.request({
                            url: url,
                            method: "POST",
                            waitMsg: "Please wait!",
                            params: params,
                            callback: function(options, success, response) {
                                this.container.items.items[0].el.unmask();
                                if (success) {
                                    var responseMessage = Ext.util.JSON
											    .decode(response.responseText);
                                    if (responseMessage.Result) {
                                        var json = Ext.util.JSON.decode(responseMessage.Data);
                                        this.regionData = Ext.util.JSON.encode(json);
                                        this.addToConfig(json);
                                    } else {
                                        Extx.cmp.toastMsg("Action failed", responseMessage.Message);
                                    }
                                    this.modified = false;
                                } else {
                                    Extx.cmp.toastMsg(oops.title, oops.msg + response.responseText);
                                }
                                //this.container.ownerCt.el.unmask();                                
                            },
                            scope: this
                        });
                    },

                    saveCard: function(url, params) {
                        //var msg = Ext.MessageBox.wait('Adding Record');
                        this.container.items.items[0].el.mask('Please wait!', 'x-mask-loading');

                        Ext.Ajax.request({
                            url: url,
                            method: "POST",
                            waitMsg: "Please wait!",
                            params: params,
                            callback: function(options, success, response) {
                                this.container.items.items[0].el.unmask();
                                if (success) {
                                    var responseMessage = Ext.util.JSON
											    .decode(response.responseText);
                                    if (responseMessage.Result) {
                                        var json = Ext.util.JSON.decode(responseMessage.Data);
                                        this.addToRegion(json);
                                    } else {
                                        Extx.cmp.toastMsg("Action failed", responseMessage.Message);
                                    }
                                    this.modified = false;
                                } else {
                                    Extx.cmp.toastMsg(oops.title, oops.msg + response.responseText);
                                }
                                //if (this.loadMask && this.container.ownerCt)
                                this.container.ownerCt.el.unmask();
                            },
                            scope: this
                        });
                    },

                    addToRegion: function(json) {

                        var template = this.getCardConfig(json);
                        var items = (typeof (template) == 'object' ? template : this.decode(template)) || null;
                        var itmEdit = this.editable(items);
                        var parentId;

                        if (this.initialConfig.containerType == 'Project') {
                            parentId = json.ReleaseID;
                        } else if (this.initialConfig.containerType == 'Release') {
                            parentId = json.IterationID;
                        } else if (this.initialConfig.containerType == 'Iteration') {
                            parentId = json.StatusID;
                        }

                        for (i = 0; i < this.container.codeConfig.items[0].items.length; i++) {
                            var item = this.container.codeConfig.items[0].items[i];
                            if (item.propConfig.ID == parentId.toLowerCase()) {
                                if (!this.container.codeConfig.items[0].items[i].items) this.container.codeConfig.items[0].items[i].items = [];
                                this.container.codeConfig.items[0].items[i].items.push(itmEdit);
                                if (!item.propConfig.items) item.propConfig.items = [];
                                item.propConfig.items.push(json);
                                this.updateUI(true);
                            }
                        }
                    },

                    getCardConfig: function(item) {
                        return {
                            xtype: 'panel',
                            layout: 'fit',
                            etype: 'ccard',
                            items: [{
                                layout: 'fit',
                                xtype: 'panel',
                                html: this.getCardHtml(item),
                                style: 'cursor: default;',
                                propConfig: item,
                                containerId: item.ReleaseID || item.IterationID,
                                etype: 'card',
                                border: false
}],
                                width: 166,
                                style: 'padding:5px;background-color:transparent;cursor: move;',
                                baseCls: 'x-box',
                                frame: true,
                                height: 126
                            }
                        },

                        addToConfig: function(json) {

                            var title = "New Iteration (" + json.PeriodTo + ")";
                            var template = this.getRegionConfig(json);
                            var items = (typeof (template) == 'object' ? template : this.decode(template)) || null;
                            var itmEdit = this.editable(items);

                            if (!this.container.codeConfig.items[0].items) this.container.codeConfig.items[0].items = [];

                            if (this.initialConfig.containerType == 'Iteration') {
                                var pos;
                                (this.container.codeConfig.items[0].items.length > 0) ? pos = this.container.codeConfig.items[0].items.length - 1 : pos = 0;
                                this.container.codeConfig.items[0].items.splice(pos, 0, itmEdit);
                                itmEdit = getLastItem(this.container.codeConfig.items[0].items);
                            } else {
                                this.container.codeConfig.items[0].items.push(itmEdit);
                                itmEdit = getLastItem(this.container.codeConfig.items[0].items);
                            }
                            this.updateUI(true);
                            //this.focusElement(itmEdit);
                        },

                        getContainerTip: function(id) {



                        },

                        getRegionConfig: function(item) {

                            (item.items && item.items.length > 0) ? items = [] : items = undefined;
                            if (item.items) {
                                for (j = 0; j < item.items.length; j++) {
                                    var subItem = item.items[j];

                                    items.push({
                                        xtype: 'panel',
                                        layout: 'fit',
                                        etype: 'ccard',
                                        items: [{
                                            layout: 'fit',
                                            xtype: 'panel',
                                            html: this.getCardHtml(subItem),
                                            style: 'cursor: default;',
                                            propConfig: subItem,
                                            containerId: item.ReleaseID || item.IterationID || subItem.IterationID,
                                            etype: 'card',
                                            border: false
}],
                                            listeners: {
                                                draggable: { insertProxy: false, onDrag: function(e) { var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); var s = this.panel.getEl().shadow; if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); } }, endDrag: function(e) { this.panel.setPosition(this.x, this.y); } }
                                            },
                                            width: 166,
                                            style: 'padding:5px;background-color:transparent;cursor: move;',
                                            baseCls: 'x-box',
                                            frame: true,
                                            height: 126
                                        });
                                    }
                                }

                                var config = {
                                    bodyStyle: 'padding: 10px;background:transparent;',
                                    cls: 'center-aligns',
                                    etype: this.initialConfig.containerType,
                                    allowDomMove: 'true',
                                    defaults: { style: 'margin-bottom: 5px;' },
                                    propConfig: item,
                                    listeners: {
                                        render: function(cmp) {
                                            this.setWidth(250);
                                            this.addClass('normal-element');
                                        }
                                    },
                                    title: item.Name + ((item.PeriodFrom) ? ' <br/> <div style="float:right;">' + formatMSDate(item.PeriodFrom, Date.patterns.TitleDate) + ' -> ' + formatMSDate(item.PeriodTo, Date.patterns.TitleDate) + '</div>' : "")
                                }

                                if (items) config.items = items;

                                return config;
                            },

                            getCardHtml: function(item, smallSize) {
                                var tip, innerHtml = "";
                                if (this.initialConfig.containerType == "Iteration") {
                                    item.Card = item.Card || "";
                                    item.Observations = item.Observations || "";
                                    item.Consignee = item.Consignee || "";

                                    if (!smallSize) {
                                        if (item.FinishDate != null)
                                            innerHtml = '<div style="color: #000000;background:' + item.Color + ';vertical-align: bottom;float:right;text-align:right;height:20px;width:100%"><div id="' + item.ID + '_scolor1" style=" background-color:' + item.StoryColor + '; width: 5px; height: 100%;float:left"></div><div style="background-color:' + item.Color + ';"><span style="text-align:left;float:left;width:50px;background-color:' + item.Color + ';">' + formatMSDate(item.FinishDate, Date.patterns.DisplayDate) + '</span><span style="text-align:right; width:58px;float:right;background-color:' + item.Color + ';">' + formatTime(item.Remaining) + '/' + formatTime(item.Evaluation) + '</span></div> </div>';
                                        else
                                            innerHtml = '<div style="color: #000000;background:' + item.Color + ';vertical-align: bottom;float:right;text-align:right;height:20px;width:100%"><div id="' + item.ID + '_scolor1" style=" background-color:' + item.StoryColor + '; width: 5px; height: 100%;float:left"></div>' + formatTime(item.Remaining) + '/' + formatTime(item.Evaluation) + '</div>';
                                        html = '<div style"height:120px;width:100%;"><div style="color: #000000;background-color:' + item.Color + ';height:85px;width:100%;"><div id="' + item.ID + '_scolor2" style=" background-color:' + item.StoryColor + '; width: 5px; height: 100%;float:left;"></div><div style="padding-left:8px">' + item.Name.substring(0, 115) + (item.Name.length > 115 ? "..." : "") + '</div></div>' + innerHtml + ' </div>';
                                    } else {
                                        html = '<div style"height:120px;width:100%;"><div style="color: #000000;background-color:' + item.Color + ';height:80px;width:100%;"><div id="' + item.ID + '_scolor2" style=" background-color:' + item.StoryColor + '; width: 5px; height: 100%;float:left"></div>' + item.Name + '</div></div>';
                                    }
                                } else if (this.initialConfig.containerType == "Release") {
                                    item.Card = item.Card || "";
                                    item.Observations = item.Observations || "";

                                    innerHtml = '<div style="color: #000000;background:' + item.Color + ';vertical-align: bottom;float:right;text-align:right;height:20px;width:100%"><div id="' + item.ID + '_scolor1" style=" background-color:' + item.FeatureColor + '; width: 5px; height: 100%;float:left"></div>' + formatTime(item.Size) + '</div>';
                                    html = '<div style"height:120px;width:100%;" ><div style="color: #000000;background-color:' + item.Color + ';height:80px;width:100%;"><div id="' + item.ID + '_scolor2" style=" background-color:' + item.FeatureColor + '; width: 5px; height: 100%;float:left"></div><div style="padding-left:8px">' + item.Name + '</div></div>' + innerHtml + ' </div>';
                                } else if (this.initialConfig.containerType == "Project") {
                                    item.Card = item.Card || "";
                                    item.Observations = item.Observations || "";

                                    innerHtml = '<div style="color: #000000;background:' + item.Color + ';vertical-align: bottom;float:right;text-align:right;height:20px;width:100%">' + item.Size + '</div>';
                                    html = '<div style"height:100px;width:100%;" ><div style="color: #000000;background-color:' + item.Color + ';height:65px;width:100%;">' + item.Name + '</div><div style="text-align:center;height:20px;width:100%;background-color:' + item.Color + ';">' + item.Finished_Percentage + '</div><div style="background-color:' + item.Color + ';"><span style="float:left;width:90px;background-color:' + item.Color + ';">' + formatMSDate(item.Target, Date.patterns.DisplayDate) + '</span><span style="text-align:right; width:58px;float:right;background-color:' + item.Color + ';">' + formatTime(item.Finished_Story_Size) + '/' + formatTime(item.Full_Story_Size) + '</span></div> </div>';
                                }
                                //background-image: url(Content/images/greenchk.png);
                                return html;
                            },

                            updateReleaseBurnDown: function() {

                                var g = new line_graph();
                                var maxValue = 0;
                                var startCount, endCount;
                                var endDate;
                                var burnDownArr;
                                var count = 0;
                                this.releaseBurndownData = new Array();
                                this.releasex_name = new Array();
                                this.releaseBurndownDataDet = new Array();
                                this.releasex_nameDet = new Array();
                                var json = this.container.items.items[0].items;

                                (json.items.length < 8) ? endCount = json.items.length : endCount = 7;

                                for (cnt = 1; cnt <= endCount; cnt++) {

                                    var item = this.container.items.items[0].items.items[cnt - 1];
                                    if (item.items && item.items.items) {
                                        for (j = 0; j < item.items.items.length; j++) {

                                            var child = item.items.items[j];
                                            var card = child.items.items[0].propConfig;

                                            count += child.items.items[0].propConfig.Size;
                                        }
                                    }

                                    this.releasex_nameDet.push(cnt);
                                    this.releaseBurndownDataDet.push(parseInt(count, 10));

                                    if (cnt < 8) {
                                        this.releasex_name.push(" " + cnt);
                                        this.releaseBurndownData.push(parseInt(count, 10));
                                        g.add("&nbsp;&nbsp;" + cnt, count);
                                    }

                                    if (count > maxValue) maxValue = count;
                                    count = 0;
                                }

                                Ext.get('releaseBurndownGraph').dom.innerHTML = "";
                                g.render("releaseBurndownGraph", "size remaining vs. iterations", 115);
                            },

                            updateBurnDown: function(id, detail, isCard) {

                                var g = new line_graph();
                                var maxValue = 0;
                                var startCount, endCount;
                                var endDate;
                                var burnDownArr;
                                var count = 0;
                                this.burnDownData = new Array();
                                this.x_name = new Array();
                                this.burnDownDataDet = new Array();
                                this.x_nameDet = new Array();

                                var objCont = Ext.getCmp(this.initialConfig.containerId);

                                if (objCont && objCont.props) {
                                    startDate = formatMSDate(objCont.props.PeriodFrom);
                                    endDate = formatMSDate(objCont.props.PeriodTo);
                                    startDay = startDate.getDate();
                                    endDay = endDate.getDate();
                                }

                                var dt = startDay;
                                var curDay;
                                var cnt;
                                (endDay < startDay) ? cnt = endDate.getDaysInMonth() + endDay : cnt = endDay;

                                for (day = startDay; day <= cnt; day++) {

                                    for (i = 0; i < this.container.items.items[0].items.items.length; i++) {

                                        var item = this.container.items.items[0].items.items[i];
                                        if (id && id.ID != item.propConfig.ID) continue;

                                        if (item.items && item.items.items) {
                                            for (j = 0; j < item.items.items.length; j++) {

                                                var child = item.items.items[j];
                                                var card = child.items.items[0].propConfig

                                                //if(id && isCard && card.ID != id.ID) continue;
                                                if (card.Actuals) {
                                                    for (k = 0; k < card.Actuals.length; k++) {
                                                        var Actual = card.Actuals[k];
                                                        var dt = new Date(Actual.Label);
                                                        if (dt.getDate() == day) {
                                                            count += Actual.Remain;
                                                            break;
                                                        }
                                                    }
                                                }

                                                //if (id && isCard && id.ID == card.ID) break;
                                            }
                                        }

                                        if (id && id.ID == item.propConfig.ID) break;
                                    }

                                    if (day >= startDate.getDaysInMonth() && curDay >= startDate.getDaysInMonth()) curDay = 1;
                                    else if (day >= startDate.getDaysInMonth()) curDay += 1;
                                    else curDay = day;

                                    this.x_nameDet.push(leadingZero(curDay));
                                    this.burnDownDataDet.push(parseInt(count, 10));

                                    if (day < (startDay + 7)) {
                                        this.x_name.push(leadingZero(curDay));
                                        this.burnDownData.push(parseInt(count, 10));

                                        g.add("&nbsp;" + leadingZero(curDay), count);
                                    }
                                    count = 0;
                                }

                                if (!detail && g.x_name.length > 0) {
                                    Ext.get('dailyBurndownGraph').dom.innerHTML = "";
                                    g.render("dailyBurndownGraph", "hrs. remaining vs. sprint days", 115);
                                } else if (detail) {
                                    var wiin = new Ext.Window({
                                        title: Ext.getCmp('DailyBurndownPnl').title,
                                        closable: false,
                                        height: Ext.getBody().getHeight(),
                                        width: '100%',
                                        buttons: [{
                                            text: "Print",
                                            handler: (function(el) {
                                                var printWin = window.open("", "", "width:100%, height:80%");
                                                var html = wiin.el.dom.outerHTML;
                                                //html = html.substring(0, html.length - 2150);
                                                printWin.document.write(html);
                                                printWin.focus();
                                                window.print()
                                            })
                                        }, {
                                            text: "Close",
                                            handler: (function() { wiin.close(); })
}],
                                            bodyStyle: 'padding:10px;background-color:white',
                                            html: '<div id="itBurndownGraphMax" style="background-color:white;overflow: hidden; position:relative;height:100%;width:100%;"></div>'
                                        });

                                        wiin.show();
                                        //wiin.maximize();

                                        g.setLines(15);
                                        g.toggleLines(false);
                                        g.setWidth((wiin.el.dom.offsetHeight - 120) / 6, ((wiin.el.dom.offsetHeight - 120) / 6) / 5);
                                        g.setWidth(70, 30);
                                        Ext.get('itBurndownGraphMax').dom.innerHTML = "";
                                        g.render("itBurndownGraphMax", "hrs. remaining vs. sprint date", wiin.el.dom.offsetHeight - 120);
                                    } else { Ext.get('dailyBurndownGraph').dom.innerHTML = ""; }

                                    //Ext.get('dailyBurndownGraph').dom.innerHTML = "";
                                    //g.render("dailyBurndownGraph", "hrs. remaining vs. sprint days", 115);
                                },

                                loadReleaseBurndown: function(el, json, detail) {

                                    if (el && el.items.get(0) && el.items.get(0).plugins[0].tabLoaded) {
                                        this.updateToolTip(el);
                                        //el.items.get(0).plugins[0].redrawElement(el.items.get(0).plugins[0].container);
                                    }

                                    var g = new line_graph();
                                    var maxValue = 0;
                                    var title = (el) ? el.title : this.container.ownerCt.title;

                                    if (!el) {

                                        var startCount, endCount;
                                        var endDate;
                                        var burnDownArr;
                                        var count = 0;
                                        this.releaseBurndownData = new Array();
                                        this.releasex_name = new Array();
                                        this.releaseBurndownDataDet = new Array();
                                        this.releasex_nameDet = new Array();

                                        (json.items.length < 8) ? endCount = json.items.length : endCount = 7;

                                        for (cnt = 1; cnt <= endCount; cnt++) {

                                            if (json.items[cnt - 1].items) {
                                                for (j = 0; j < json.items[cnt - 1].items.length; j++) {
                                                    var subItem = json.items[cnt - 1].items[j];

                                                    count += subItem.Size;
                                                }
                                            }

                                            this.releasex_nameDet.push(cnt);
                                            this.releaseBurndownDataDet.push(parseInt(count, 10));

                                            if (cnt < 8) {
                                                this.releasex_name.push(" " + cnt);
                                                this.releaseBurndownData.push(parseInt(count, 10));
                                                g.add("&nbsp;&nbsp;" + cnt, count);
                                            }

                                            if (count > maxValue) maxValue = count;
                                            count = 0;
                                        }
                                    }
                                    else if (el && el.items.items) {

                                        var designerCmp = el.items.items[0].plugins[0];
                                        var burnDownData;
                                        var burnDownCount;

                                        designerCmp.propertyGrid.initialConfig = designerCmp.initialConfig;

                                        if (!designerCmp.releaseBurndownData && !designerCmp.releasex_name) {
                                            //Extx.cmp.toastMsg("Loading failure", "Navigate to Release tab and try again.");
                                            return;

                                        }
                                        if (detail) {
                                            burnDownData = designerCmp.releaseBurndownDataDet;
                                            burnDownCount = designerCmp.releasex_nameDet;

                                        } else {
                                            burnDownData = designerCmp.releaseBurndownData;
                                            burnDownCount = designerCmp.releasex_name;
                                        }

                                        for (i = 0; i < burnDownData.length; i++) {
                                            g.add("&nbsp; " + burnDownCount[i], burnDownData[i]);
                                        }

                                        if (designerCmp) designerCmp.updateUI();
                                    }

                                    if (!detail && g.x_name.length > 0) {
                                        Ext.getCmp('ReleaseBurndownPnl').setTitle(title + " Burndown");
                                        Ext.get('releaseBurndownGraph').dom.innerHTML = "";
                                        g.render("releaseBurndownGraph", "size remaining vs. iterations", 115);
                                    } else if (detail) {
                                        var wiin = new Ext.Window({
                                            title: Ext.getCmp('ReleaseBurndownPnl').title,
                                            closable: false,
                                            height: Ext.getBody().getHeight(),
                                            width: '100%',
                                            buttons: [{
                                                text: "Print",
                                                handler: (function() {

                                                })
                                            }, {
                                                text: "Close",
                                                handler: (function() { wiin.close(); })
}],
                                                bodyStyle: 'padding:10px;background-color:white',
                                                html: '<div id="reBurndownGraphMax" style="background-color:white;overflow: hidden; position:relative;height:100%;width:100%;"></div>'
                                            });

                                            wiin.show();

                                            g.setLines(15);
                                            g.toggleLines(false);
                                            g.setWidth((wiin.el.dom.offsetHeight - 120) / 6, ((wiin.el.dom.offsetHeight - 120) / 6) / 5);
                                            g.setWidth(70, 30);
                                            Ext.get('reBurndownGraphMax').dom.innerHTML = "";
                                            g.render("reBurndownGraphMax", "size remaining vs. no. of sprints", wiin.el.dom.offsetHeight - 120);
                                        } else { Ext.get('releaseBurndownGraph').dom.innerHTML = ""; }

                                    },

                                    loadBurndown: function(el, json, detail) {


                                        if (!detail && el && el.items.get(0) && el.items.get(0).plugins[0].tabLoaded) {
                                            this.updateToolTip();
                                            var parent = Ext.getCmp(el.items.get(0).plugins[0].initialConfig.params.iterationId).props.ReleaseID;
                                            var stories = this.updateDropdowns(el.items.get(0).plugins[0].initialConfig.params.iterationId, Ext.getCmp(parent));
                                            if (el.items.get(0).plugins[0].propertyGrid.getPropertyType('Story') != null)
                                                el.items.get(0).plugins[0].propertyGrid.getPropertyType('Story').values = stories;
                                            if (stories) this.updateColor(el, "StoryID", "StoryColor", stories);
                                        }
                                        var title = (el) ? el.title : this.container.ownerCt.title;
                                        var g = new line_graph();

                                        if (!el) {

                                            //this.tabLoaded = true;
                                            //21 - 100, 22 - 90, 23 - 80, 24 - 60, 25 - 50, 26 - 45, 27 - 30
                                            //iteration starts from 5/21 - 6/05                                    
                                            var startDate, startDay, endDay;
                                            var endDate;
                                            var burnDownArr;
                                            var count = 0;
                                            this.burnDownData = new Array();
                                            this.x_name = new Array();
                                            this.burnDownDataDet = new Array();
                                            this.x_nameDet = new Array();

                                            var objCont = Ext.getCmp(this.initialConfig.containerId);

                                            if (objCont && objCont.props) {
                                                startDate = formatMSDate(objCont.props.PeriodFrom);
                                                endDate = formatMSDate(objCont.props.PeriodTo);
                                                startDay = startDate.getDate();
                                                endDay = endDate.getDate();
                                            }

                                            var dt = startDay;
                                            var curDay;
                                            var cnt;
                                            (endDay < startDay) ? cnt = endDate.getDaysInMonth() + endDay : cnt = endDay;

                                            for (day = startDay; day <= cnt; day++) {

                                                for (i = 0; i < json.items.length; i++) {
                                                    var item = json.items[i];
                                                    if (json.items[i].items) {
                                                        for (j = 0; j < json.items[i].items.length; j++) {
                                                            var subItem = json.items[i].items[j];

                                                            if (subItem.Actuals) {
                                                                for (k = 0; k < subItem.Actuals.length; k++) {
                                                                    var Actual = subItem.Actuals[k];
                                                                    var dt = new Date(Actual.Label);
                                                                    if (dt.getDate() == day) {
                                                                        count += Actual.Remain;
                                                                        break;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }


                                                if (day >= startDate.getDaysInMonth() && curDay >= startDate.getDaysInMonth()) curDay = 1;
                                                else if (day >= startDate.getDaysInMonth()) curDay += 1;
                                                else curDay = day;

                                                this.x_nameDet.push(leadingZero(curDay));
                                                this.burnDownDataDet.push(parseInt(count, 10));

                                                if (day < (startDay + 7)) {
                                                    this.x_name.push(leadingZero(curDay));
                                                    this.burnDownData.push(parseInt(count, 10));

                                                    g.add("&nbsp;" + leadingZero(curDay), count);
                                                }
                                                count = 0;
                                            }
                                        } else if (el && el.items.items) {

                                            var designerCmp = el.items.items[0].plugins[0];

                                            var burnDownData;
                                            var burnDownDate;

                                            designerCmp.propertyGrid.initialConfig = designerCmp.initialConfig;

                                            if (!designerCmp.burnDownData && !designerCmp.x_name) {
                                                return;
                                            }
                                            if (detail) {
                                                burnDownData = designerCmp.burnDownDataDet;
                                                burnDownDate = designerCmp.x_nameDet;

                                            } else {
                                                burnDownData = designerCmp.burnDownData;
                                                burnDownDate = designerCmp.x_name;
                                            }

                                            for (i = 0; i < burnDownData.length; i++) {
                                                g.add("&nbsp;" + burnDownDate[i], burnDownData[i]);
                                            }
                                            if (!detail) {
                                                designerCmp.updateBurnDown(undefined, detail);
                                                return;
                                            }
                                        }

                                        if (!detail && g.x_name.length > 0) {
                                            Ext.getCmp('DailyBurndownPnl').setTitle(title + " Burndown");
                                            Ext.get('dailyBurndownGraph').dom.innerHTML = "";
                                            g.render("dailyBurndownGraph", "hrs. remaining vs. sprint days", 115);
                                        } else if (detail) {
                                            var wiin = new Ext.Window({
                                                title: Ext.getCmp('DailyBurndownPnl').title,
                                                closable: false,
                                                height: Ext.getBody().getHeight(),
                                                width: '100%',
                                                buttons: [{
                                                    text: "Print",
                                                    handler: (function() {

                                                    })
                                                }, {
                                                    text: "Close",
                                                    handler: (function() { wiin.close(); })
}],
                                                    bodyStyle: 'padding:10px;background-color:white',
                                                    html: '<div id="itBurndownGraphMax" style="background-color:white;overflow: hidden; position:relative;height:100%;width:100%;"></div>'
                                                });

                                                wiin.show();

                                                g.setLines(15);
                                                g.toggleLines(false);
                                                g.setWidth((wiin.el.dom.offsetHeight - 120) / 6, ((wiin.el.dom.offsetHeight - 120) / 6) / 5);
                                                g.setWidth(70, 30);
                                                Ext.get('itBurndownGraphMax').dom.innerHTML = "";
                                                g.render("itBurndownGraphMax", "hrs. remaining vs. sprint date", wiin.el.dom.offsetHeight - 120);
                                            } else { Ext.get('dailyBurndownGraph').dom.innerHTML = ""; }
                                        },

                                        updateUI: function() {
                                            this.redrawElement(this.container);
                                            if (this.initialConfig.containerType == etypes.release) {
                                                //this.loadReleaseBurndown(null, this.container.codeConfig.items[0].dataConfig);
                                                this.updateReleaseBurnDown();
                                            } else if (this.initialConfig.containerType == etypes.iteration) {
                                                //this.loadBurndown(null, this.container.codeConfig.items[0].dataConfig);
                                                this.updateBurnDown();
                                            }
                                            this.updateToolTip();
                                        },


                                        resetConfig: function(json, config) {
                                            var items;
                                            var tbar = [];
                                            var parentEl;
                                            var elId;
                                            var cardTip;
                                            var startDate = new Date();
                                            var projectTabPanel = Ext.getCmp('ProjectTabPanel');
                                            var doneStatus = undefined;
                                            var todoStatus = undefined;
                                            var inpStatus = undefined;

                                            tbar.push(this.getToolbar());

                                            (json.items.length > 0) ? config = [] : config = undefined;
                                            for (i = 0; i < json.items.length; i++) {
                                                var item = json.items[i];
                                                elId = item.ID;
                                                this.regionData = Ext.util.JSON.encode(item);
                                                (parentEl == "ProjectPanel") ? parentEl = item.ID : "";

                                                (json.items[i].items && json.items[i].items.length > 0) ? items = [] : items = undefined;
                                                if (json.items[i].items) {
                                                    for (j = 0; j < json.items[i].items.length; j++) {
                                                        var subItem = json.items[i].items[j];
                                                        this.cardData = Ext.util.JSON.encode(subItem);

                                                        items.push({
                                                            xtype: 'panel',
                                                            layout: 'fit',
                                                            etype: 'ccard',
                                                            items: [{
                                                                layout: 'fit',
                                                                xtype: 'panel',
                                                                html: this.getCardHtml(subItem),
                                                                style: 'cursor: default;',
                                                                propConfig: subItem,
                                                                containerId: item.ReleaseID || item.IterationID || subItem.IterationID,
                                                                etype: 'card',
                                                                border: false
}],
                                                                listeners: {
                                                                    draggable: { insertProxy: false, onDrag: function(e) { var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); var s = this.panel.getEl().shadow; if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); } }, endDrag: function(e) { this.panel.setPosition(this.x, this.y); } }
                                                                },
                                                                width: 166,
                                                                style: 'padding:5px;background-color:transparent;cursor: move;',
                                                                baseCls: 'x-box',
                                                                frame: true,
                                                                height: 126
                                                            });
                                                        }
                                                    }

                                                    if (this.initialConfig.containerType == "Iteration" && item.Name == defaultStatuses.Done) {
                                                        doneStatus = this.formatRegionConfig(item);
                                                        if (items) doneStatus.items = items;
                                                    } else if (this.initialConfig.containerType == "Iteration" && item.Name == defaultStatuses.InProgress) {
                                                        inpStatus = this.formatRegionConfig(item);
                                                        if (items) inpStatus.items = items;
                                                    } else if (this.initialConfig.containerType == "Iteration" && item.Name == defaultStatuses.NotDone) {
                                                        todoStatus = this.formatRegionConfig(item);
                                                        if (items) todoStatus.items = items;
                                                    } else {
                                                        config.push(this.formatRegionConfig(item));
                                                        if (items) config[config.length - 1].items = items;
                                                    }


                                                    if (i > 0) {
                                                        //this.setSize(251, Ext.getCmp('ProjectPanel').container.getHeight() - 25);projectTabPanel.activate(Ext.getCmp(this.initialConfig.parentEl));
                                                        this.initialConfig.parentEl = (json.items[i + 1]) ? json.items[i + 1].ID : "";
                                                    } else {
                                                        //projectTabPanel.activate(Ext.getCmp(this.initialConfig.parentEl));                                            
                                                        this.initialConfig.parentEl = (json.items[i + 1]) ? json.items[i + 1].ID : "";
                                                    }

                                                    if (!Ext.getCmp('ProjectPanel').hasLoaded && this.initialConfig.containerType == "Project") {
                                                        var urls = { addUrl: '../Iteration/Add', deleteUrl: '../Iteration/Delete', addCardUrl: '../Story/Update', deleteCardUrl: '../Story/Delete' };
                                                        projectTabPanel.add(this.buildDesignerUI('Release', { releaseId: item.ID }, "../Iteration/Index", item.ID, item.Name, true, urls));
                                                        var newTab = projectTabPanel.items.last();
                                                        newTab.on('activate', this.loadReleaseBurndown, this);
                                                        newTab.on('deactivate', this.deactiveElement, this);
                                                    } else if (this.initialConfig.containerType == "Release") {
                                                        //projectTabPanel.add(this.buildDesignerUI('Iteration', {}, "../Status/Index", item.ID, item.Name, true));
                                                    }

                                                    if (!Ext.getCmp('ProjectPanel').hasLoaded && json.items[i].tabItems) {
                                                        for (j = 0; j < json.items[i].tabItems.length; j++) {
                                                            var tabItem = json.items[i].tabItems[j];
                                                            var urls = { addUrl: '../Status/Add', deleteUrl: '../Status/Delete', addCardUrl: '../Task/Update', deleteCardUrl: '../Task/Delete' };
                                                            projectTabPanel.add(this.buildDesignerUI('Iteration', { iterationId: tabItem.ID }, "../Status/Index", tabItem.ID, tabItem.Name, true, urls, tabItem));
                                                            var newTab = projectTabPanel.items.last();
                                                            newTab.on('activate', this.loadBurndown, this);
                                                            newTab.on('deactivate', this.deactiveElement, this);
                                                        }
                                                    }
                                                }


                                                var tmpConfig = {
                                                    defaults: {},
                                                    layout: "table",
                                                    etype: "container",
                                                    dataConfig: json,
                                                    layoutConfig: { scrollOffset: 13 },
                                                    autoScroll: true,
                                                    tbar: tbar,
                                                    bodyStyle: 'background:transparent url(../images/grass.gif) bottom repeat-x;',
                                                    border: false
                                                }

                                                if (config) {
                                                    if (doneStatus) config.push(doneStatus);
                                                    if (inpStatus) config.splice(0, 0, inpStatus);
                                                    if (todoStatus) config.splice(0, 0, todoStatus);
                                                    tmpConfig.items = config;
                                                }

                                                if (this.initialConfig.containerType == 'Release') {
                                                    this.loadReleaseBurndown(null, json);
                                                } else if (this.initialConfig.containerType == 'Iteration') {
                                                    this.loadBurndown(null, json);
                                                }

                                                this.setConfig(tmpConfig, true);

                                                this.updateToolTip();

                                                if (this.initialConfig.containerType == "Release") {

                                                    var features = this.updateDropdowns(this.initialConfig.params.releaseId, Ext.getCmp('ProjectPanel').items.get(0));
                                                    if (features && this.propertyGrid.getPropertyType('Feature') != null) {
                                                        this.propertyGrid.getPropertyType('Feature').values = features;
                                                    }
                                                } else if (this.initialConfig.containerType == "Iteration") {

                                                    Ext.Ajax.request({
                                                        url: '../Story/Index',
                                                        method: "POST",
                                                        waitMsg: "Please wait!",
                                                        params: this.initialConfig.params,
                                                        callback: function(options, success, response) {
                                                            if (success) {
                                                                var responseMessage = Ext.util.JSON.decode(response.responseText);
                                                                if (responseMessage.Result) {
                                                                    var nullStory = { ID: null, Name: "None" };
                                                                    var stories = Ext.util.JSON.decode(responseMessage.Data);
                                                                    if (stories) {
                                                                        stories.items.splice(0, 0, nullStory);
                                                                        if (this.propertyGrid.getPropertyType('Story') != null)
                                                                            this.propertyGrid.getPropertyType('Story').values = stories.items;
                                                                    }
                                                                } else {
                                                                    Extx.cmp.toastMsg("Loading failure", "Please try reloading the page...");
                                                                }
                                                            } else {
                                                                Extx.cmp.msg(oops.title, oops.msg + response.responseText);
                                                            }
                                                        },
                                                        scope: this
                                                    });
                                                }

                                                if (this.initialConfig.containerType == "Project" && !Ext.getCmp('ProjectPanel').hasLoaded) {
                                                    setTimeout(function() {
                                                        new Ext.ux.ToastWindow({
                                                            title: 'Testing Release',

                                                            html: 'You are running an unstable testing release. ' +
							                            'It is not intended for normal use. Please report bugs and post ' +
							                            'comments about this release (build ' +
							                            '0.0.0.1' +
							                            ') frequently. Happy Testing!'
                                                        }).show(document);
                                                    }, 1000);
                                                }
                                            },

                                            formatRegionConfig: function(item) {
                                                return {
                                                    bodyStyle: 'padding: 10px;background:transparent;',
                                                    cls: 'center-aligns',
                                                    etype: this.initialConfig.containerType,
                                                    allowDomMove: 'true',
                                                    defaults: { style: 'margin-bottom: 5px;' },
                                                    propConfig: item,
                                                    listeners: {
                                                        render: function(cmp) {
                                                            this.setWidth(250);
                                                            this.addClass('normal-element');
                                                        }
                                                    },
                                                    title: item.Name + ((item.PeriodFrom) ? ' <br/> <div style="float:right;">' + formatMSDate(item.PeriodFrom, Date.patterns.TitleDate) + ' -> ' + formatMSDate(item.PeriodTo, Date.patterns.TitleDate) + '</div>' : "")
                                                };
                                            },


                                            deactiveElement: function(el) {
                                                var designerCmp = el.items.items[0].plugins[0];
                                                designerCmp.activeElement = false;

                                                if (designerCmp.propertyGrid) {
                                                    designerCmp.propertyGrid.disable();
                                                    designerCmp.propertyGrid.setSource({});
                                                }

                                                //Remove old highlight and drag support                                            
                                                designerCmp.container.el.select('.selectedElement').removeClass('selectedElement');
                                                designerCmp.container.el.removeClass('selectedElement');
                                                designerCmp.container.el.select('.highlight-element').addClass('normal-element');
                                                designerCmp.container.el.select('.highlight-element').removeClass('highlight-element');
                                                designerCmp.container.el.select('.designerddgroup').removeClass('designerddgroup');
                                            },

                                            updateToolTip: function(el) {

                                                (!el) ? el = this.container : el = el.items.get(0);

                                                var config = (el) ? el.plugins[0].initialConfig || el.items.get(0).plugins[0].initialConfig : this.initialConfig;

                                                var evaluationSum, remainingSum, taskCount, storySize, taskEvalSum, taskRemainSum;
                                                for (i = 0; i < el.items.items[0].items.items.length; i++) {

                                                    var item = el.items.items[0].items.items[i];

                                                    var html, title;

                                                    if (config.containerType == etypes.project) {

                                                    } else if (config.containerType == etypes.release) {
                                                        item.propConfig.Velocity = 0;
                                                        item.propConfig.Story_Size_Sum = 0;
                                                        item.propConfig.Task_Evaluation_Sum = 0;
                                                        item.propConfig.Task_Remaining_Sum = 0;

                                                    } else if (config.containerType == etypes.iteration) {
                                                        item.propConfig.Task_Count = 0;
                                                        item.propConfig.Evaluation_Sum = 0;
                                                        item.propConfig.Remaining_Sum = 0;
                                                    }

                                                    if (item.items && item.items.items) {
                                                        for (j = 0; j < item.items.items.length; j++) {

                                                            var child = item.items.items[j];
                                                            var card = child.items.items[0].propConfig;

                                                            if (config.containerType == 'Project') {
                                                                tip = '<b>' + card.Name + '</b><br/>';
                                                                tip += "Status: " + formatStatus(card.Status) + "<br/>";
                                                                tip += "Full Story Size: " + formatTime(card.Full_Story_Size) + "<br/>";
                                                                tip += "Finished Story Size: " + formatTime(card.Finished_Story_Size) + "<br/>";
                                                                tip += "Finished Percentage: " + card.Finished_Percentage + "<br/>";
                                                                tip += "Target: " + formatMSDate(card.Target, Date.patterns.DisplayDate) + "<br/>";
                                                                tip += "Card: " + card.Card + "<br/>";
                                                                tip += "Observations: " + card.Observations;
                                                            } else if (config.containerType == 'Release') {
                                                                var obj = this.getStoryCalcs(card.IterationID, card.ID);
                                                                if (obj) {
                                                                    card.EvaluationSum = obj.EvaluationSum;
                                                                    card.RemainingSum = obj.RemainingSum;
                                                                    card.Status = obj.Status;
                                                                }
                                                                tip = '<b>' + card.Name + '</b><br/>';
                                                                tip += "Feature: " + card.Feature + "<br/>";
                                                                tip += "Status: " + formatStatus(card.Status) + "<br/>";
                                                                tip += "Size: " + formatTime(card.Size) + "<br/>";
                                                                tip += "Task Evaluation Sum: " + formatTime(card.EvaluationSum) + "<br/>";
                                                                tip += "Primary: " + card.Primary + "<br/>";
                                                                tip += "Card: " + card.Card + "<br/>";
                                                                tip += "Observations: " + card.Observations;

                                                                if (isDone(card.Status)) item.propConfig.Velocity += card.Size;
                                                                item.propConfig.Story_Size_Sum += card.Size;
                                                                item.propConfig.Task_Evaluation_Sum += card.EvaluationSum;
                                                                item.propConfig.Task_Remaining_Sum += card.RemainingSum;
                                                            } else if (config.containerType == 'Iteration') {
                                                                tip = '<b>' + card.Name + '</b><br/>';
                                                                tip += "Story: " + card.Story + "<br/>";
                                                                tip += "Status: " + formatStatus(card.Status) + "<br/>";
                                                                tip += "Remaining: " + formatTime(card.Remaining) + "<br/>";
                                                                tip += "Evaluation: " + formatTime(card.Evaluation) + "<br/>";
                                                                tip += "Beyond: " + formatTime(card.Beyond) + "<br/>";
                                                                tip += "Target: " + formatDate(card.Target, 'd') + "<br/>";
                                                                tip += "Consignee: " + card.Consignee + "<br/>";
                                                                tip += "Primary: " + card.Primary + "<br/>";
                                                                tip += "Created on: " + formatDate(card.CreateDate, 'd') + "<br/>";
                                                                tip += "Started on: " + formatDate(card.StartDate, 'd') + "<br/>";
                                                                tip += "Finished on: " + formatDate(card.FinishDate, 'd') + "<br/>";
                                                                tip += "Card: " + card.Card + "<br/>";
                                                                tip += "Observations: " + card.Observations;

                                                                item.propConfig.Task_Count++;
                                                                item.propConfig.Evaluation_Sum += card.Evaluation;
                                                                item.propConfig.Remaining_Sum += card.Remaining;
                                                            }

                                                            child.tip = new Ext.ToolTip({

                                                                target: child.id,

                                                                html: tip,

                                                                closable: false,

                                                                hideParent: true,

                                                                width: 200,

                                                                draggable: true,

                                                                title: ' '

                                                            });

                                                        }
                                                    }

                                                    if (config.containerType == 'Project') {
                                                        ptip = "From: " + formatMSDate(item.propConfig.PeriodFrom, Date.patterns.DisplayDate) + "<br/>";
                                                        ptip += "To: " + formatMSDate(item.propConfig.PeriodTo, Date.patterns.DisplayDate) + "<br/>";
                                                    } else if (config.containerType == 'Release') {
                                                        ptip = "From: " + formatMSDate(item.propConfig.PeriodFrom, Date.patterns.DisplayDate) + "<br/>";
                                                        ptip += "To: " + formatMSDate(item.propConfig.PeriodTo, Date.patterns.DisplayDate) + "<br/>";
                                                        ptip += "Velocity: " + formatTime(item.propConfig.Velocity) + "<br/>";
                                                        ptip += "Story Size Sum: " + formatTime(item.propConfig.Story_Size_Sum) + "<br/>";
                                                        ptip += "Task Evaluation Sum: " + formatTime(item.propConfig.Task_Evaluation_Sum) + "<br/>";
                                                        ptip += "Task Remaining Sum: " + formatTime(item.propConfig.Task_Remaining_Sum) + "<br/>";

                                                    } else if (config.containerType == 'Iteration') {
                                                        ptip = "Task Count: " + item.propConfig.Task_Count + "<br/>";
                                                        ptip += "Evaluation Sum: " + formatTime(item.propConfig.Evaluation_Sum) + "<br/>";
                                                        ptip += "Remaining Sum: " + formatTime(item.propConfig.Remaining_Sum) + "<br/>";
                                                    }

                                                    var userButtonTip = new Ext.ToolTip({

                                                        target: item.id,

                                                        html: ptip,

                                                        closable: false,

                                                        width: 170,

                                                        draggable: true,

                                                        title: '<b>' + item.propConfig.Name + '</b>'

                                                    });
                                                }
                                            },


                                            buildDesignerUI: function(containerType, params, url, id, title, closable, urls, props) {

                                                return {
                                                    id: id,
                                                    layout: 'fit',
                                                    props: props,
                                                    border: false,
                                                    title: title,
                                                    closable: closable,
                                                    etype: 'container',
                                                    xtype: 'panel',
                                                    bodyBorder: false,
                                                    items: {
                                                        border: false,
                                                        bodyBorder: false,
                                                        bodyStyle: 'background:transparent url(../../Content/images/grass.gif) bottom repeat-x;',
                                                        xtype: 'jsonpanel',
                                                        plugins: [new Extx.cmp.workSpace(
                                        {
                                            containerType: containerType,
                                            containerId: id,
                                            url: url,
                                            params: params,
                                            urls: urls,
                                            autoLoad: true
                                        }
                                        )]
                                                    }
                                                };
                                            },


                                            /**
                                            * Boolean indicator telling if code has been modified
                                            * @param {boolean} newValue the value to set modify flag (defaults unchanged)
                                            * @returns {boolean} The state flag
                                            */
                                            isModified: function(newValue) {
                                                if (newValue != undefined) this.modified = newValue;
                                                return this.modified;
                                            },

                                            /**
                                            * Load a config from URL
                                            * @param {Element} el The url to load
                                            */
                                            loadConfig: function(url) {
                                                if (this.loadMask && this.container.ownerCt)
                                                    this.container.ownerCt.el.mask(this.loadMsg, this.msgCls);
                                                Ext.Ajax.request({
                                                    url: url,
                                                    method: 'GET',
                                                    callback: function(options, success, response) {
                                                        if (success) {
                                                            this.setConfig(response.responseText, false);
                                                            this.modified = false;
                                                        } else {
                                                            if (!this.fireEvent('loadfailed', url, response))
                                                                Ext.Msg.alert('Failure', 'Failed to load url :' + url);
                                                        }
                                                        if (this.loadMask && this.container.ownerCt)
                                                            this.container.ownerCt.el.unmask();
                                                    },
                                                    scope: this
                                                });
                                            },

                                            /**
                                            * Get the config as string of the specified element
                                            * @param {Element} el The element for which to get the config object
                                            * @return {String} The config string
                                            */
                                            getCode: function(el) {
                                                return this.encode(this.getConfig(el));
                                            },


                                            /**
                                            * Get the config of the specified element
                                            * @param {Element} el The element for which to get the config object
                                            * @return {Object} The config object
                                            */
                                            getConfig: function(el) {
                                                if (!el && this.container.items) {
                                                    el = this.container.items.items;
                                                    //Check if root is a array with more then one element, if so return array
                                                    if (el.length > 1) {
                                                        var arr = [];
                                                        for (var i = 0; i < el.length; i++) {
                                                            arr.push(this.getConfig(el[i]));
                                                        }
                                                        return arr;
                                                    }
                                                    el = el[0];
                                                }
                                                if (!el) return {};
                                                if (!el.codeConfig && el[this.jsonId]) {
                                                    var findIn = function(o) {
                                                        if (!o) return null;
                                                        if (o[this.jsonId] == el[this.jsonId]) return o;
                                                        if (o.items) {
                                                            for (var i = 0; i < o.items.length; i++) {
                                                                var r = findIn(o.items[i]);
                                                                if (r) return r;
                                                            }
                                                        }
                                                        return null;
                                                    } .createDelegate(this);
                                                    el.codeConfig = findIn(this.codeConfig)
                                                }
                                                return el.codeConfig || el.initialConfig;
                                            },

                                            /**
                                            * Set the config to the design element
                                            * @param {String/Object} json The json to be applied
                                            * @param {Boolean} noUndo When true no undo will be created
                                            * @return {Boolean} true when succesfull applied
                                            */
                                            setConfig: function(json, noUndo) {
                                                if (!noUndo) this.markUndo();
                                                var items = (typeof (json) == 'object' ? json : this.decode(json)) || null;
                                                this.container.codeConfig = items ? { items: (items instanceof Array ? this.editable(items) : [this.editable(items)])} : {};
                                                this.redrawElement(this.container);
                                                this.modified = true;
                                                //this.fireEvent('newconfig', noUndo);
                                                return true;
                                            },

                                            /**
                                            * Refresh the content of the designer
                                            */
                                            refresh: function() {
                                                this.redrawElement(this.container);
                                            },

                                            /**
                                            * Find parent which is of type container
                                            * @param {Element} el The element for which to find the contrainer
                                            * @return {Container} The container found
                                            */
                                            getContainer: function(el) {
                                                var p = el;
                                                while (p && p != this.container && !this.isContainer(p)) p = p.ownerCt;
                                                if (p && !p.codeConfig) p.codeConfig = this.getConfig(p);
                                                return p;
                                            },

                                            /**
                                            * Get the json id of the (active) element
                                            * @param {Element} el The element (default to activeElement)
                                            * @return {String} The json id of the active element
                                            */
                                            getJsonId: function(el) {
                                                el = el || this.activeElement;
                                                if (!el) return null;
                                                return el[this.jsonId] ? el[this.jsonId] : null;
                                            },

                                            /**
                                            * redraw an element with the changed config
                                            * @param {Element} element The elmenent to update
                                            * @param {Object} config The config
                                            * @return {Boolean} Indicator that update was applied
                                            */
                                            redrawElement: function(element, selectId) {
                                                this.hideVisualResize();
                                                var el = element || this.activeElement;
                                                if (el) {
                                                    try {
                                                        var id = selectId || this.getJsonId();
                                                        var p = this.container; //Redraw whole canvas
                                                        if (!this.redrawContainer && el != p) {
                                                            //Check if whe can find parent which can be redraw
                                                            var c = '';
                                                            p = this.getContainer(el);
                                                            //Search if whe find a layout capable contianer
                                                            while (p != this.container && !c) {
                                                                c = p.codeConfig.layout;
                                                                p = this.getContainer(p.ownerCt);
                                                            }
                                                        }
                                                        this.apply(p, this.getConfig(p).items);
                                                        this.redrawContainer = false;
                                                        if (selectId) this.selectElement(selectId);
                                                    } catch (e) {
                                                        if (this.fireEvent('error', 'redrawElement', e))
                                                            Ext.Msg.alert('Failure', 'Failed to redraw element ' + e);
                                                        return false;
                                                    }
                                                    //this.fireEvent('change', el);
                                                    this.modified = true;
                                                    var elHeight = Ext.getCmp('ProjectPanel').container.getHeight() - 26;

                                                    for (i = 0; i < this.container.items.items[0].items.items.length; i++) {
                                                        var height = this.container.items.items[0].items.items[i].container.dom.clientHeight;
                                                        if (height > elHeight)
                                                            elHeight = height;
                                                    }

                                                    for (i = 0; i < this.container.items.items[0].items.items.length; i++) {
                                                        this.container.items.items[0].items.items[i].setHeight(elHeight);
                                                    }

                                                    return true;
                                                }
                                                return false;
                                            },

                                            /**
                                            * Apply the Json to given visual element
                                            * @param {Object/String} json The json to apply
                                            * @param {Element} el The element to apply the json to
                                            * @param {Boolean} clean When false object will not be cleaned, defaults true
                                            * @return {Object} The elements applied
                                            */
                                            apply: function(el, json, clean) {
                                                var items;
                                                try {
                                                    items = this.jsonId ? this.editable(json) : json || {};
                                                    if (typeof (items) !== 'object') items = this.decode(json);
                                                    if (items && (items instanceof Array || typeof (items) == "object")) {
                                                        if (clean !== false) items = this.clean(items);
                                                        //this.fireEvent('beforeapply', el, items);
                                                        //Apply global json vars to element
                                                        if (el instanceof Ext.Container) {
                                                            //Clear out orignal content of container
                                                            while (el.items && el.items.first()) { el.remove(el.items.first(), true); }
                                                            if (!this.isEmpty(items)) {
                                                                if (items instanceof Array) {
                                                                    el.add.apply(el, items);
                                                                } else {
                                                                    el.add(items);
                                                                }
                                                                //Apply json settings if there
                                                                this.set(el, items.json);
                                                            }
                                                        } else {
                                                            this.set(el, items);
                                                        }
                                                        if (el.rendered && el.layout && el.layout.layout) el.doLayout();
                                                    }
                                                } catch (e) {
                                                    if (this.fireEvent('error', 'apply', e)) throw e;
                                                } finally {
                                                    //this.fireEvent('afterapply', el, items);
                                                }
                                                return items;
                                            },

                                            /**
                                            * Check if a object is empty, ignoring jsonId keys
                                            * @param {Object\Array} obj The json object to be checked
                                            * @return {Boolean} true when object does not contain any data
                                            */
                                            isEmpty: function(obj) {
                                                if (obj instanceof Array) {
                                                    for (var i = 0; i < obj.length; i++) {
                                                        if (!this.isEmpty(obj[i])) return false;
                                                    }
                                                } else if (typeof (obj) == 'object') {
                                                    for (var i in obj) {
                                                        if ((!this.useHasOwn || obj.hasOwnProperty(i)) &&
             (!this.jsonId || i.indexOf(this.jsonId) != 0)) {
                                                            return false;
                                                        }
                                                    }
                                                } else if (obj != undefined) return false;
                                                return true;
                                            },

                                            /**
                                            * Function called to set the values of items to element using element functions
                                            * Special keys within the object are required_css and required_js
                                            * these keys can contain a comma seperated list of javascript or stylesheets
                                            * to load. Style sheets are loaded asynchone but javascript are loaded synchrone.
                                            * @param {Object} items The config object with items that should be set
                                            * @param {Element} element The element to which to set the values
                                            * @param {Object} options Options that can be set are scope,scopeOnly
                                            * @return {Boolean} indicator if all changes where set
                                            */
                                            set: function(element, items, options) {
                                                var allSet = true, el = element || this;
                                                options = options || {}
                                                if (options.nocache == undefined) options.nocache = this.nocache;
                                                if (items) {
                                                    if (options.scopeOnly) options = Ext.apply({ evalException: false }, options);
                                                    if (typeof (items) == 'string') items = this.decode(items, options);
                                                    for (var i in items) {
                                                        var j = i;
                                                        if (i == 'required_js') {
                                                            if (items[i]) {
                                                                var files = items[i].replace(',', ';').split(';');
                                                                for (var f = 0; f < files.length; f++) {
                                                                    if (document.getElementById(files[f])) { continue; }
                                                                    if (!this.scriptLoader(files[f], options.nocache)) {
                                                                        var e = new Error('Failed to load javascript ' + files[f]);
                                                                        if (this.fireEvent('error', 'set', e)) throw e;
                                                                    }
                                                                }
                                                            }
                                                        } else if (i == 'required_css') {
                                                            if (items[i]) {
                                                                var files = items[i].replace(',', ';').split(';');
                                                                for (var f = 0; f < files.length; f++) {
                                                                    if (document.getElementById(files[f])) { continue; }
                                                                    Ext.util.CSS.swapStyleSheet(files[f], files[f]);
                                                                }
                                                            }
                                                        } else {
                                                            var applyTo = el;
                                                            //When scope of var set if
                                                            if (i.indexOf('scope.') == 0) {
                                                                applyTo = options.scope ? options.scope : this.getScope();
                                                                j = i.substring(6);
                                                                if (j.charAt(0) == '!') {
                                                                    //Check if it only should be set when not available
                                                                    j = j.substring(1);
                                                                    if (applyTo[j]) continue;
                                                                }
                                                            } else if (options.scopeOnly) continue;
                                                            var k = 'set' + j.substring(0, 1).toUpperCase() + j.substring(1);
                                                            try {
                                                                if (applyTo[k] && typeof applyTo[k] == 'function') {
                                                                    applyTo[k].call(el, items[i]);
                                                                } else if (applyTo[j] && typeof applyTo[j] == 'function') {
                                                                    applyTo[j].call(el, items[i]);
                                                                } else {
                                                                    applyTo[j] = items[i];
                                                                }
                                                            } catch (e) {
                                                                if (options.ignoreError) {
                                                                    allSet = false;
                                                                } else {
                                                                    allSet |= (this.fireEvent('error', 'set(' + k + ')', e) === false);
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                                return allSet;
                                            },

                                            /**
                                            * Function returning the scope to beused for the json
                                            * @return {Object} the object which should be used as scope when parsing
                                            */
                                            getScope: function() {
                                                return this.scope;
                                            },

                                            /**
                                            * Clean the null elements from items object
                                            * @param {Object} items The items object to be cleaned
                                            * @return {Object} The cleaned items object
                                            */
                                            clean: function(items) {
                                                var c = 0;
                                                for (var k in items) {
                                                    if (!this.useHasOwn || items.hasOwnProperty(k)) {
                                                        if (k == 'items') {
                                                            if (items[k] instanceof Array) {
                                                                var n = [];
                                                                for (var i = 0, a = items[k]; i < a.length; i++) {
                                                                    var o = this.clean(a[i]);
                                                                    if (o != null) n.push(o);
                                                                }
                                                                items[k] = (n.length > 0) ? n : null;
                                                            } else items[k] = this.clean(items[k]);
                                                        }
                                                        if (items[k] === undefined || items[k] === null || (typeof items[k] == "string" && items[k] == "")) {
                                                            delete items[k];
                                                        } else {
                                                            c++;
                                                        }
                                                    }
                                                }
                                                return c ? items : null;
                                            },

                                            /**
                                            * Convert a Json to a editable Json by adding an jsonId when set to each object
                                            * @param {Object/String} json The json as text or object to add an id to
                                            * @return {Object} The decoded object with id's added
                                            */
                                            editable: function(json) {
                                                var items = json || {};
                                                if (typeof (items) !== 'object') items = this.decode(json);
                                                if (!this.jsonId) return items;
                                                if (items instanceof Array) {
                                                    for (var i = 0; i < items.length; i++) {
                                                        items[i] = this.editable(items[i]);
                                                    }
                                                    return items;
                                                }
                                                //Check if the object is allready editable
                                                if (!items[this.jsonId]) {
                                                    items[this.jsonId] = Ext.id();
                                                    if (items.items) items.items = this.editable(items.items);
                                                }
                                                return items;
                                            },

                                            /**
                                            * Select and focus a element
                                            */
                                            focusElement: function(el) {
                                                if (this.getDesignElement(el).etype == "container") {
                                                    this.activeElement = this.getDesignElement(el);
                                                    if (this.propertyGrid) {
                                                        this.propertyGrid.disable();
                                                        this.propertyGrid.setSource({});
                                                    }
                                                    return false;
                                                }

                                                var cmp = this.selectElement(el);
                                                //        if (cmp && cmp.innerWrap) {
                                                //            cmp.innerWrap.focus();
                                                //        } else if (cmp) cmp.focus();        
                                            },


                                            /**
                                            * Select a designElement
                                            * @param {Element} el The element of the item to select
                                            * @param {Boolean} fieldOnNull Use the designer field when element not found
                                            * @return {Component} The selected component
                                            */
                                            selectElement: function(el) {
                                                if (typeof (el) == 'string') el = this.findByJsonId(el);

                                                var cmp = this.highlightElement(this.getDesignElement(el));

                                                if (this.autoResize && !this.isContainer(cmp)) {
                                                    this.visualResize(cmp, false);
                                                } else {
                                                    this.hideVisualResize();
                                                }
                                                if (cmp && cmp == this.activeElement) return cmp;
                                                this.activeElement = cmp;
                                                if (cmp) {
                                                    //Search parent and select tabpanel
                                                    var selectParent = function(cmp, last) {
                                                        if (!cmp) return;
                                                        //TabPanel check
                                                        var check;
                                                        if (check = cmp instanceof Ext.TabPanel ? cmp : null) {
                                                            if (last && last != check.getActiveTab()) check.setActiveTab(last);
                                                            for (var i = 0; i < check.items.items.length; i++) {
                                                                if (check.items.items[i] == check.getActiveTab() && check.codeConfig.activeTab != i) {
                                                                    check.codeConfig.activeTab = i;
                                                                    check.doLayout();
                                                                }
                                                            }
                                                        }
                                                        selectParent(this.getContainer(cmp.ownerCt), cmp);
                                                    } .createDelegate(this);
                                                    selectParent(cmp, null);

                                                    if (this.propertyGrid) {
                                                        this.propertyFilter();
                                                        this.propertyGrid.enable();
                                                        this.propertyGrid.setSource(cmp.codeConfig);
                                                    }
                                                } else {
                                                    if (this.propertyGrid) {
                                                        this.propertyGrid.disable();
                                                        this.propertyGrid.setSource({});
                                                    }
                                                }
                                                //this.fireEvent('selectelement', cmp);
                                                return cmp;
                                            },

                                            /**
                                            * Highlight a element within the component, removing old highlight
                                            * @param {Element} el The element to highlight
                                            * @return {Element} The element highlighted
                                            */
                                            highlightElement: function(el, burnDown) {
                                                //Remove old highlight and drag support
                                                if (this.container.el.select('.selectedElement') && this.container.el.select('.selectedElement').elements.length > 0) {
                                                    //this.container.el.select('.selectedElement').elements[0].style.border != "" ? this.container.el.select('.selectedElement').elements[0].style.border = "white 1px solid" : "";
                                                }
                                                this.container.el.select('.selectedElement').removeClass('selectedElement');
                                                this.container.el.removeClass('selectedElement');
                                                this.container.el.select('.highlight-element').addClass('normal-element');
                                                this.container.el.select('.highlight-element').removeClass('highlight-element');
                                                this.container.el.select('.designerddgroup').removeClass('designerddgroup');

                                                if (el) {
                                                    if (el.innerWrap) {
                                                        if (el.etype == "Project" || el.etype == "Release" || el.etype == "Iteration") {
                                                            el.innerWrap.removeClass('normal-element');
                                                            if (el.id != this.container.id) el.innerWrap.addClass("highlight-element");
                                                        }
                                                        else if (el.etype == "ccard") {
                                                            //el.addClass("selectedElement");
                                                            //if (el.id != this.container.id) el.addClass("designerddgroup");
                                                        }
                                                        else if (el.etype == "card") {
                                                            el.innerWrap.addClass("selectedElement");
                                                            if (el.id != this.container.id) el.innerWrap.addClass("designerddgroup");
                                                        }

                                                    } else {
                                                        if (el.etype == "Project" || el.etype == "Release" || el.etype == "Iteration") {
                                                            el.removeClass('normal-element');
                                                            if (el.id != this.container.id) el.addClass("highlight-element");

                                                            if (el.etype == "Iteration" && !burnDown) this.updateBurnDown(el.codeConfig.propConfig);
                                                        }
                                                        else if (el.etype == "ccard") {
                                                            //el.addClass("selectedElement");
                                                            //if (el.id != this.container.id) el.addClass("designerddgroup");
                                                        }
                                                        else if (el.etype == "card") {
                                                            el.ownerCt.addClass("selectedElement");
                                                            //el.ownerCt.el.dom.style.border = 'blue 1px solid';
                                                            if (el.ownerCt.id != this.container.id) el.ownerCt.addClass("designerddgroup");
                                                        }
                                                    }
                                                    return el;

                                                }
                                                return el;
                                            },

                                            /**
                                            * Check if a element is contained within a other element
                                            * @param {Element} cmp The component to search
                                            * @param {Element} container The component to search within
                                            * @return {Component} The ExtJs component found, false when not valid
                                            */
                                            isElementOf: function(cmp, container) {
                                                container = container || this.container;
                                                var loops = 50, c = cmp, id = container.getId();
                                                while (loops && c) {
                                                    if (c.id == id) {
                                                        return cmp;
                                                    }
                                                    c = c.ownerCt;
                                                    loops--;
                                                }
                                                return false;
                                            },

                                            /**
                                            * Find a designElement, this is a ExtJs component which is embedded within this.container
                                            * @param {Element} el The element to search the designelement for
                                            * @return {Component} The ExtJs component found, false when not valid
                                            */
                                            getDesignElement: function(el, allowField) {
                                                var cmp, loops = 10;
                                                while (loops && el) {
                                                    cmp = Ext.getCmp(el.id);
                                                    if (cmp) {
                                                        //Check if element is contained within container and if is autoLoaded
                                                        var id = this.container.getId(), c = cmp;
                                                        loops = 50;
                                                        while (loops && c && c.id != id) {
                                                            if (c instanceof Ext.Panel && c.autoLoad) cmp = c;
                                                            c = c.ownerCt;
                                                            loops--;
                                                        }
                                                        var contained = c && c.id == id;
                                                        if (!cmp.codeConfig) cmp.codeConfig = this.getConfig(cmp);
                                                        if (!allowField && cmp == this.container) return false;
                                                        return contained ? cmp : (allowField ? this.container : false);
                                                    }
                                                    el = el.parentNode;
                                                    loops--;
                                                }
                                                return allowField ? this.container : false;
                                            },

                                            findByJsonId: function(id) {
                                                return this.container.findBy(function(c, p) { return (c[this.jsonId] == id ? true : false); }, this)[0];
                                            },

                                            /**
                                            * Create the drag data for a element on designerpanel
                                            * @param {Event} e The drag event
                                            * @return {Object} the drag data
                                            */
                                            getDragData: function(e) {
                                                var cmp = this.highlightElement(this.getDesignElement(this.getTarget(e))).ownerCt;
                                                var el = e.getTarget('.designerddgroup');
                                                if (cmp && el) {
                                                    var d = el.cloneNode(true);
                                                    d.id = Ext.id();
                                                    return {
                                                        ddel: d,
                                                        config: cmp.initialConfig,
                                                        internal: true,
                                                        source: cmp
                                                    };
                                                }
                                            },

                                            /**
                                            * Check if the given component is a container which can contain other xtypes
                                            * @param {Component} cmp The component to validate if it is in the list
                                            * @return {Boolean} True indicates the xtype is a container capable of contain other elements
                                            */
                                            isContainer: function(cmp) {
                                                return cmp instanceof Ext.Container;
                                            },

                                            /**
                                            * @private Fix a problem in firefox with drop getTarget by finding a component
                                            * using xy coordinates.
                                            * @param {Event} event The event for which a node should be searched
                                            * @return {Node} The node that is located by xy coordinates or null when none.
                                            */
                                            getTarget: function(event) {
                                                if (!event) return;
                                                var et = event.getTarget();
                                                if ((!Ext.isGecko || Ext.isGecko3) && event.lastTarget && event.lastTarget == et) {
                                                    return et;
                                                }
                                                var n, findNode = function(c) {
                                                    if (c && c.el && c.getPosition && c.getSize) {
                                                        var pos, size;
                                                        if (c.innerWrap) {
                                                            pos = c.innerWrap.getXY();
                                                            size = c.innerWrap.getSize();
                                                        } else {
                                                            pos = c.getPosition();
                                                            size = c.getSize();
                                                        }
                                                        if (event.xy[0] >= pos[0] && event.xy[0] <= pos[0] + size.width &&
           event.xy[1] >= pos[1] && event.xy[1] <= pos[1] + size.height) {
                                                            n = c
                                                            if (c.items && c.items.items) {
                                                                var cs = c.items.items;
                                                                for (var i = 0, len = cs.length; i < len && !findNode(cs[i]); i++) { }
                                                            }
                                                            return true;
                                                        }
                                                    }
                                                    return false;
                                                };
                                                findNode(this.container);
                                                event.lastTarget = n || et;
                                                return event.lastTarget;
                                            },

                                            /**
                                            * Called when a element is dragged over the component
                                            * @param {Object} src The source element
                                            * @param {Event} e The drag event
                                            * @param {Object} data The dataobject of event
                                            * @return {Boolean} return true to accept or false to reject
                                            */
                                            notifyOver: function(src, e, data) {



                                                if (data.config) {
                                                    var cmp = this.highlightElement(this.getDesignElement(this.getTarget(e), true), false);
                                                    if (cmp.initialConfig.etype == "card" || cmp.initialConfig.etype == "ccard") {
                                                        data.drop = null;
                                                        return false;
                                                    }

                                                    var el = cmp.getEl();
                                                    if (data.internal && !e.shiftKey) {
                                                        //Only allow move if not within same container
                                                        if (this.isElementOf(cmp, data.source, true)) return false;
                                                        data.drop = this.isContainer(cmp) ? "move" :
         (el.getX() + (el.getWidth() / 2) > Ext.lib.Event.getPageX(e) ? "movebefore" : "moveafter");
                                                        return (data.drop == 'movebefore' ? "icon-element-move-before" :
          (data.drop == 'moveafter' ? "icon-element-move-after" : "icon-element-move"));
                                                    } else { //Clone
                                                        data.drop = this.isContainer(cmp) ? "append" :
         (el.getX() + (el.getWidth() / 2) > Ext.lib.Event.getPageX(e) ? "appendbefore" : "appendafter");
                                                        return (data.drop == 'appendbefore' ? "icon-element-add-before" :
          (data.drop == 'appendafter' ? "icon-element-add-after" : "icon-element-add"));
                                                    }
                                                }
                                                data.drop = null;
                                                return false;
                                            },


                                            /**
                                            * Called when a element is dropped on the component
                                            * @param {Object} src The source element
                                            * @param {Event} e The drag event
                                            * @param {Object} data The dataobject of event
                                            * @return {Boolean} return true to accept or false to reject
                                            */
                                            notifyDrop: function(src, e, data) {
                                                var el = this.getTarget(e);
                                                var params = undefined;
                                                if (data.config && !data.processed && data.drop) {

                                                    if (data.source.items.get(0).propConfig && data.source.items.get(0).propConfig.EvaluationSum > 0) {
                                                        Extx.cmp.toastMsg("Drag failed", "Story which contains tasks cannot be moved.");
                                                        return;
                                                    }

                                                    this.tempData = { data: data, el: el, append: true };

                                                    this.tempPropConfig = Ext.util.JSON.encode(data.source.items.items[0].codeConfig.propConfig);

                                                    if (this.initialConfig.containerType == "Iteration") {
                                                        data.source.items.items[0].codeConfig.propConfig.StatusID = el.codeConfig.propConfig.ID;
                                                        if (IsDefaultStatus(el.codeConfig.propConfig.Name)) {
                                                            params = {
                                                                NewStatus: GetDefaultStatus(el.codeConfig.propConfig.Name)
                                                            };
                                                        }
                                                        this.postToServer(data.source.items.items[0].codeConfig.propConfig, this.initialConfig.urls.addCardUrl, (params) ? params : undefined);
                                                    } else if (this.initialConfig.containerType == "Release") {
                                                        data.source.items.items[0].codeConfig.propConfig.IterationID = el.codeConfig.propConfig.ID;
                                                        this.postToServer(data.source.items.items[0].codeConfig.propConfig, this.initialConfig.urls.addCardUrl);
                                                    } else if (this.initialConfig.containerType == "Project") {
                                                        data.source.items.items[0].codeConfig.propConfig.ReleaseID = el.codeConfig.propConfig.ID;
                                                        this.postToServer(data.source.items.items[0].codeConfig.propConfig, this.initialConfig.urls.addCardUrl || this.addCardUrl);
                                                    }

                                                    //this.appendConfig(el, data.config, true, data.drop, data.source, {});
                                                    data.processed = true;
                                                }
                                                return true;
                                            },

                                            /**
                                            * Overwrite the jsonparser to check if a xtype exists, when not save it for editing
                                            * and convert it into a panel.
                                            * @param {Object} object The object array used to assing
                                            * @param {String} key The key of the element within then object
                                            * @param {Object} value The value of the element within the object
                                            * @retrun {Object} The value assigned
                                            */
                                            setObjectValue: function(object, key, value, rawValue, scope) {
                                                if (key == 'xtype' && this.jsonId) {
                                                    if (!Ext.ComponentMgr.isTypeAvailable(value)) {
                                                        rawValue = { value: value, encode: true };
                                                        value = 'panel';
                                                        this.fireEvent('error', 'setObjectValue', new SyntaxError('xtype ' + rawValue.value + ' does not exists'));
                                                    } else rawValue = null;
                                                }
                                                return Ext.ux.guid.plugin.Designer.superclass.setObjectValue.call(this, object, key, value, rawValue, scope);
                                            },

                                            /**
                                            * @private Function called to initalize the property editor which can be used to edit properties
                                            * @param {PropertyGrid} propertyGrid The property grid which is used to edit
                                            */
                                            setPropertyGrid: function(propertyGrid) {
                                                this.propertyGrid = propertyGrid;
                                                this.propertyGrid.jsonScope = this.getScope();
                                                this.propertyGrid.initialConfig = this.initialConfig;
                                                propertyGrid.on('beforepropertychange', function(source, id, value, oldvalue) {
                                                    this.tempPropConfig = Ext.util.JSON.encode(source.propConfig);
                                                    //this.markUndo();
                                                }, this);
                                                propertyGrid.on('propertyvalue', function(source, key, value, type, property) {

                                                    source.propConfig[key] = value;
                                                    //this.initialConfig = this.propertyGrid.initialConfig;
                                                    //var html = this.getCardHtml(source.propConfig);
                                                    //this.setObjectValue(source, "html", html, html);
                                                    return false; //We have set value
                                                }, this);
                                                propertyGrid.on('propertychange', function(source, id, value, oldvalue) {
                                                    if (this.propertyGrid.initialConfig.containerType != this.initialConfig.containerType) return;

                                                    if (Ext.isDate(value) && oldvalue == "") {
                                                        source.propConfig[id] = getMSDate(value);
                                                    }
                                                    else if (Ext.isDate(value) && value.format(Date.patterns.ShortDate) != oldvalue.format(Date.patterns.ShortDate)) {
                                                        source.propConfig[id] = getMSDate(value);
                                                    } else if (Ext.isDate(value) && value.format(Date.patterns.ShortDate) == oldvalue.format(Date.patterns.ShortDate)) {
                                                        source.propConfig[id] = getMSDate(value);
                                                        return;
                                                    }

                                                    this.tempData = { source: source, change: true };

                                                    if (source.etype == etypes.card || source.etype == etypes.ccard) {
                                                        this.postToServer(source.propConfig, this.propertyGrid.initialConfig.urls.addCardUrl || this.addCardUrl, this.propertyGrid.el);
                                                    } else {
                                                        this.postToServer(source.propConfig, this.propertyGrid.initialConfig.urls.addUrl || this.addUrl, this.propertyGrid.el, this.updateContainerCallback);
                                                    }

                                                    //this.notifyOthers(source.propConfig, id);
                                                    return false;
                                                }, this);
                                            },

                                            notifyOthers: function(config, id) {
                                                if (this.initialConfig.containerType == "Iteration") {

                                                } else if (this.initialConfig.containerType == "Release" && (id == "Name" || id == "Color")) {
                                                    var dependent = Ext.getCmp(config.IterationID);
                                                    if (!dependent) return;
                                                    var designerCmp = dependent.items.items[0].plugins[0];
                                                    if (designerCmp && designerCmp.tabLoaded) {
                                                        for (i = 0; i < designerCmp.container.items.items[0].items.items.length; i++) {
                                                            var item = designerCmp.container.items.items[0].items.items[i];
                                                            var html, title;

                                                            if (item.items && item.items.items) {
                                                                for (j = 0; j < item.items.items.length; j++) {
                                                                    var child = item.items.items[j];
                                                                    var card = child.items.items[0].propConfig;

                                                                    if (card.StoryID == config.ID) {
                                                                        card.StoryID = config.StoryID;
                                                                        card.Story = config.Name;
                                                                        card.StoryColor = config.Color;
                                                                        Ext.get(card.ID + '_scolor1').dom.style.backgroundColor = config.Color;
                                                                        Ext.get(card.ID + '_scolor2').dom.style.backgroundColor = config.Color;
                                                                        return;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                } else if (this.initialConfig.containerType == "Project") {

                                                }
                                            },

                                            getStoryCalcs: function(iteration, story) {
                                                var dependent = Ext.getCmp(iteration);
                                                if (!dependent) return undefined;
                                                var returnVal = false;
                                                var designerCmp = dependent.items.items[0].plugins[0];
                                                var eveluationSum = 0;
                                                var remainingSum = 0;
                                                var status;
                                                if (designerCmp && designerCmp.tabLoaded) {
                                                    for (m = 0; m < designerCmp.container.items.items[0].items.items.length; m++) {
                                                        var item = designerCmp.container.items.items[0].items.items[m];
                                                        var html, title;

                                                        if (item.items && item.items.items) {
                                                            for (n = 0; n < item.items.items.length; n++) {
                                                                var child = item.items.items[n];
                                                                var card = child.items.items[0].propConfig;

                                                                if (card.StoryID == story) {
                                                                    eveluationSum += card.Evaluation;
                                                                    remainingSum += card.Remaining;

                                                                    if (!status && IsDefaultStatus(card.Status)) status = card.Status;
                                                                    else if (!status) status = defaultStats.InProgress;

                                                                    if (isNotDone(card.Status) && isNotDone(status))
                                                                        status = defaultStats.NotDone;
                                                                    else if (isDone(card.Status) && isDone(status))
                                                                        status = defaultStats.Done;
                                                                    else
                                                                        status = defaultStats.InProgress;
                                                                }
                                                            }
                                                        }
                                                    }
                                                    returnVal = true;
                                                }

                                                if (returnVal && status)
                                                    return { EvaluationSum: eveluationSum, RemainingSum: remainingSum, Status: status };
                                                else return { EvaluationSum: '0.0', RemainingSum: '0.0', Status: defaultStats.NotDone };
                                            },

                                            updateDropdowns: function(id, dependent) {
                                                if (!dependent) dependent = Ext.getCmp(id);
                                                var values = [{ ID: null, Name: "None"}];
                                                var designerCmp = dependent.items.items[0].plugins[0];
                                                if (designerCmp && designerCmp.tabLoaded) {
                                                    for (i = 0; i < designerCmp.container.items.items[0].items.items.length; i++) {
                                                        var item = designerCmp.container.items.items[0].items.items[i];
                                                        if (item.propConfig.ID != id) continue;

                                                        if (item.items && item.items.items) {
                                                            for (k = 0; k < item.items.items.length; k++) {
                                                                var child = item.items.items[k];
                                                                var card = child.items.items[0].propConfig;

                                                                values.push({ ID: card.ID, Name: card.Name, Color: card.Color });
                                                            }
                                                        }
                                                    }
                                                }

                                                return values;
                                            },

                                            updateColor: function(dependent, id, destination, colorItems) {
                                                if (!dependent) return;
                                                var designerCmp = dependent.items.items[0].plugins[0];
                                                if (designerCmp) {
                                                    for (i = 0; i < designerCmp.container.items.items[0].items.items.length; i++) {
                                                        var item = designerCmp.container.items.items[0].items.items[i];

                                                        if (item.items && item.items.items) {
                                                            for (k = 0; k < item.items.items.length; k++) {
                                                                var child = item.items.items[k];
                                                                var card = child.items.items[0].propConfig;

                                                                for (c = 0; c < colorItems.length; c++) {
                                                                    var colorItem = colorItems[c];

                                                                    if (card[id] == colorItem.ID) {
                                                                        card[destination] = colorItem.Color;
                                                                        Ext.get(card.ID + '_scolor1').dom.style.backgroundColor = colorItem.Color;
                                                                        Ext.get(card.ID + '_scolor2').dom.style.backgroundColor = colorItem.Color;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            },



                                            getFeatureCalcs: function(release, feature, chain) {
                                                var dependent = Ext.getCmp(release);
                                                if (!dependent) return;
                                                var returnVal = false;
                                                var designerCmp = dependent.items.items[0].plugins[0];
                                                var totalSize = 0;
                                                var status = defaultStats.NotDone;
                                                var completedSize = 0;
                                                if (designerCmp && designerCmp.tabLoaded) {
                                                    //if(chain) designerCmp.updateToolTip(dependent);
                                                    for (i = 0; i < designerCmp.container.items.items[0].items.items.length; i++) {
                                                        var item = designerCmp.container.items.items[0].items.items[i];
                                                        var html, title;


                                                        //innerDependent = Ext.getCmp(item.propConfig.ID);
                                                        //var innerCmp;
                                                        //if (innerDependent) innerCmp = innerDependent.items.items[0].plugins[0];
                                                        //if(innerCmp && innerCmp.tabLoaded) innerCmp.updateToolTip(innerDependent);

                                                        if (item.items && item.items.items) {
                                                            for (k = 0; k < item.items.items.length; k++) {
                                                                var child = item.items.items[k];
                                                                var card = child.items.items[0].propConfig;

                                                                if (card.FeatureID == feature) {
                                                                    totalSize += card.Size;
                                                                    if (!isInProgress(status) && !isInProgress(card.Status) && IsDefaultStatus(card.Status))
                                                                        status = GetDefaultStatus(card.Status);
                                                                    else
                                                                        status = null;

                                                                    if (isDone(status)) {
                                                                        status = GetDefaultStatus(defaultStats.Done);
                                                                        completedSize += card.Size;
                                                                    } else if (status == null)
                                                                        status = GetDefaultStatus(defaultStats.InProgress);
                                                                }
                                                            }
                                                        }
                                                    }
                                                    returnVal = true;
                                                }

                                                if (returnVal)
                                                    return { FullStorySize: totalSize, FinishedStorySize: completedSize, Status: status }
                                                else return undefined;
                                            },

                                            postToServer: function(source, ajaxUrl, params, callback) {
                                                //sourceEl.mask('Please wait!', 'x-mask-loading')
                                                if (!params) params = {
                                                    Json: Ext.util.JSON.encode(source),
                                                    Update: true
                                                };
                                                else {
                                                    params.Json = Ext.util.JSON.encode(source);
                                                    params.Update = true;
                                                }

                                                Ext.Ajax.request({
                                                    url: ajaxUrl,
                                                    method: "POST",
                                                    waitMsg: "Please wait!",
                                                    params: params,
                                                    callback: callback || this.postToServerCallback,
                                                    scope: this
                                                });
                                            },

                                            postToServerCallback: function(options, success, response) {

                                                if (success) {
                                                    var responseMessage = Ext.util.JSON.decode(response.responseText);
                                                    if (responseMessage.Result) {
                                                        var json = Ext.util.JSON.decode(responseMessage.Data);
                                                        if (this.tempData && this.tempData.append) {
                                                            this.tempData.data.source.items.items[0].codeConfig.propConfig = json;
                                                            this.appendConfig(this.tempData.el, this.tempData.data.config, true, this.tempData.data.drop, this.tempData.data.source, {});
                                                        } else if (this.tempData && this.tempData.change) {
                                                            var html = this.getCardHtml(json);
                                                            this.setObjectValue(this.tempData.source, "html", html, html);
                                                            this.tempData.source.propConfig = json;
                                                        }
                                                        if (this.propertyGrid && this.tempData && this.tempData.change) {
                                                            this.propertyGrid.setSource(this.tempData.source);
                                                        }
                                                        //this.redrawElement.defer(150, this);
                                                        this.updateUI();
                                                        //this.tempData.data.source.items.items[0].codeConfig.tempConfig = undefined;
                                                    } else {
                                                        if (this.tempData && this.tempData.change) {
                                                            var undo = Ext.util.JSON.decode(this.tempPropConfig);
                                                            this.setObjectValue(this.tempData.source, "propConfig", undo, undo);
                                                        }
                                                        //this.tempData.source.propConfig = undo;                                                
                                                        Extx.cmp.msg(oops.title, oops.msg + response.responseText);
                                                    }
                                                } else {
                                                    Extx.cmp.msg(oops.title, oops.msg);
                                                }
                                            },

                                            postToServerRollback: function() {

                                                if (this.tempData && this.tempData.append) {
                                                    this.tempData.data.source.items.items[0].codeConfig.propConfig = this.tempData.data.source.items.items[0].codeConfig.tempConfig;
                                                } else if (this.tempData && this.tempData.change) {
                                                    var html = this.getCardHtml(this.tempData.data.source.items.items[0].codeConfig.tempConfig);
                                                    this.setObjectValue(this.tempData.source, "html", html, html);
                                                    this.redrawElement.defer(150, this);
                                                }
                                                this.tempData.data.source.items.items[0].codeConfig.tempConfig = undefined;
                                            },

                                            /**
                                            * Mark a configuration for undo
                                            */
                                            markUndo: function() {
                                                while (this.undoHistory.length > this.undoHistoryMark) this.undoHistory.pop();
                                                this.undoHistory.push({ config: this.encode(this.getConfig(), 0, true), activeId: this.getJsonId() });
                                                while (this.undoHistory.length > this.undoHistoryMax) this.undoHistory.shift();
                                                this.undoHistoryMark = this.undoHistory.length;
                                                //this.menuUpdate();
                                            },

                                            /**
                                            * Undo a configuration
                                            */
                                            undo: function() {
                                                if (this.undoHistoryMark > 0) {
                                                    if (this.undoHistoryMark == this.undoHistory.length) {
                                                        //Make sure whe have point to recover incase of redo
                                                        this.undoHistory.push({ config: this.encode(this.getConfig(), 0, true), activeId: this.getJsonId() });
                                                        this.undoHistoryMark = this.undoHistory.length - 1;
                                                    }
                                                    this.undoHistoryMark--;
                                                    var undoObj = this.undoHistory[this.undoHistoryMark];
                                                    this.setConfig(undoObj.config, true);
                                                    this.selectElement(undoObj.activeId);
                                                    //this.menuUpdate();
                                                }
                                            },

                                            /**
                                            * Redo an undo configuration
                                            */
                                            redo: function() {
                                                if (this.undoHistory.length > this.undoHistoryMark + 1) {
                                                    this.undoHistoryMark++;
                                                    var redoObj = this.undoHistory[this.undoHistoryMark];
                                                    this.setConfig(redoObj.config, true);
                                                    this.selectElement(redoObj.activeId);
                                                    this.menuUpdate();
                                                }
                                            },

                                            updateContainerCallback: function(options, success, response) {

                                                if (success) {
                                                    var responseMessage = Ext.util.JSON.decode(response.responseText);
                                                    if (responseMessage.Result) {
                                                        var json = Ext.util.JSON.decode(responseMessage.Data);
                                                        this.regionData = Ext.util.JSON.encode(json);
                                                        var title = json.Name + ((json.PeriodFrom) ? ' <br/> <div style="float:right;">' + formatMSDate(json.PeriodFrom, Date.patterns.TitleDate) + ' -> ' + formatMSDate(json.PeriodTo, Date.patterns.TitleDate) + '</div>' : "");
                                                        //this.setObjectValue(this.tempData.source, "title", title, title);
                                                        if (Ext.getCmp(json.ID)) Ext.getCmp(json.ID).setTitle(json.Name);

                                                        if (this.initialConfig.containerType == "Project") {
                                                            Ext.getCmp('ProjectPanel').items.clear();
                                                            designer = addDesigner('ProjectPanel', 'Project', 'Project', { projectId: Ext.get('projectId').dom.value });
                                                        } 
                                                        this.updateUI();
                                                    } else {
                                                        var undo = Ext.util.JSON.decode(this.tempPropConfig);
                                                        this.setObjectValue(this.tempData.source, "propConfig", undo, undo);
                                                        Extx.cmp.toastMsg("Error", responseMessage.Message);
                                                    }
                                                } else {
                                                    Extx.cmp.oopsMsg(oops.title, oops.msg + response.responseText);
                                                }
                                            },

                                            /**
                                            * Show or hide the toolbox
                                            * @param {Boolean} visible Should toolbox be hidden or shown (defaults true)
                                            */
                                            toolbox: function(visible) {
                                                if (!this._toolbox) {
                                                    //Add Filter function based on instance
                                                    var filterByFn = function(rec, id) {
                                                        var i = rec.get('instance');
                                                        if (i) return eval('this.activeElement instanceof ' + i);
                                                        return true;
                                                    } .createDelegate(this);
                                                    this.propertyFilter = function() {
                                                        //this.properties.filterBy(filterByFn, this);
                                                    };
                                                }
                                                this.toolboxTarget = Ext.getCmp('toolbox');
                                                if (this.toolboxTarget)
                                                    this._toolbox = this.toolboxTarget;
                                                this._toolbox.show();
                                                this._toolbox.doLayout();
                                            }

                                        });

                        function addDesignerUI(el, containerType, params, url, id, title, closable) {
                            var panelObj = Ext.getCmp(el);

                            panelObj.add({        
                                id: id,                        
                                layout: 'fit',
                                border: false,
                                title: title,
                                closable: closable,
                                etype: 'container',
                                xtype: 'panel',                                                               
                                bodyBorder: false,
                                style: 'padding:0px 0px;',
                                items: {
                                    border: false,
                                    bodyBorder: false,
                                    bodyStyle: 'background:transparent url(../../Content/images/grass.gif) bottom repeat-x;',
                                    xtype: 'jsonpanel',
                                    plugins: [new Extx.cmp.workSpace(
                        {
                            containerType: containerType,
                            url: url,
                            params: params
                        }
                        )]
                                }
                            });
                        }